{"id":1743,"date":"2023-11-09T05:00:00","date_gmt":"2023-11-09T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1743"},"modified":"2026-03-12T01:48:00","modified_gmt":"2026-03-12T08:48:00","slug":"angular-17-lazy-loading-with-defer","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-lazy-loading-with-defer\/","title":{"rendered":"Lazy-loading with @defer"},"content":{"rendered":"\n

Today, let’s cover how to fully customize lazy-loading with Angular using @defer<\/a>.<\/p>\n\n\n\n

What’s great about @defer is that it no longer relies on the Angular router. You can lazy-load any standalone component anywhere, anytime, and on your terms, as you can decide the trigger<\/a> to load that component.<\/p>\n\n\n\n

Let’s start with a basic example:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above code will load the HelloComponent<\/code> as soon as the browser is idle, which means it’s done loading everything else. While that is happening, we can decide to display a placeholder, and in my case, I decided that such a placeholder would be displayed for a minimum of 2 seconds no matter what. You can use seconds (s) or milliseconds (ms) as a time unit:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can see the above code in action here on Stackblitz<\/a>. Note that the Angular Language service was updated accordingly, so VS Code (Stackblitz is a web-based VS code), Webstorm, and other IDEs already know about the new @defer<\/code> syntax and do proper highlighting of it!<\/p>\n\n\n\n

We can also specify a loading<\/a> template and an error template<\/a>, all customizable with a minimum amount of time during which we would display those templates (example on Stackblitz here<\/a>):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

I used “big” numbers to see the different states in my examples. Note that @loading<\/code> supports an “after ” option only to show the loading template if loading takes more than a certain amount of time, so you don’t have to display anything if the component loads quickly. Both parameters are optional:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

These are the different new blocks available with @defer<\/code>. <\/p>\n\n\n\n

Next, you can look at the different trigger options<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Today, let’s cover how to fully customize lazy-loading with Angular using @defer. What’s great about @defer is that it no longer relies on the Angular router. You can lazy-load any standalone component anywhere, anytime, and on your terms, as you can decide the trigger to load that component. Let’s start with a basic example: The […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20,7],"tags":[],"class_list":["post-1743","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1743"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1743\/revisions"}],"predecessor-version":[{"id":2391,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1743\/revisions\/2391"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}