If you are an Angular developer, you will need to improve the loading times of your Angular app to make it work smoothly. Angular Deferrable views or @defer blocks are an handy way that you can defer the loading of larger components based on various triggers. This can sometimes, significantly improve the loading times of your application. Using deferrable views can improve the Core Web Vitals of your Angular application.
Implementing deferrable views aren’t that hard. This guide will provide you the necessary knowledge to implement deferrable views on your Angular project.
Note: To use Angular
@deferblocks, you need at least Angular 17.
The @defer Block
The @defer block can be used to defer the loading of large components in your app. This can improve the initial loading time thus improving the performance of your application. When you wrap a component using @defer block, the Angular component compile that component into a separate chunk. Then you can conditionally load the component on demand. Implementing @defer block is easy:
@defer {
<large-component />
}
Apart from the @defer block, there are three other sub blocks that can be used to handle different stages of the deferred view loading process.
The @placeholder block
The @placeholder block works as the placeholder content show before the @defer block is triggered, as the @defer block doesn’t render anything until it’s triggered. Specifying a @placeholder block is recommended for better user experience.
@defer {
<large-component />
} @placeholder {
<p>Placeholder content</p>
}
You can also add delay to the @placeholder block by passing a value in milliseconds (ms) or seconds (s) to the minimum parameter. This can avoid flickering effect of the @placeholder block if the deferred view load quickly.
@defer {
<large-component />
} @placeholder (minimum 500ms) {
<p>Placeholder content</p>
}
Note that @placeholder block is not used as the loading indicator. It is used only as a place holder where the deferred view is supposed to load. For loading indicator, there’s a separate block.
The @loading Block
You can show an loading indicator while the @defer block is loading using the @loading block. When the loading is triggered, @loading block will replace the @placeholder block. This is where you can use something like a loading spinner to indicate that the deferred view is loading.
@defer {
<large-component />
} @loading {
<img alt="loading..." src="loading.gif" />
}
There are two optional parameters in @loading block, you can use to avoid flickers in the deferred view if the content loads fast. You can use after parameter to specify the time the block needs to wait till it shows (transitioning from @placeholder block). And to specify how long the @loading block show show, you can use the minimum parameter. Values can be passed in in milliseconds (ms) or seconds (s).
@defer {
<large-component />
} @loading (after 100ms; minimum 1s) {
<img alt="loading..." src="loading.gif" />
}
The @error block
The @error block can be used to show a content when the deferred view failed to load. Although this is an optional block, using this block can improve the user experience.
@defer {
<large-component />
} @error {
<p>Oops! Something went wrong.</p>
}
Deferred View Triggers
There are various triggers that you can use to control when to load the deferred view. When the @defer block is triggered, it will replace the @placehoder block with the deferred content. There are two main trigger options you can use, namely on and when.
The on Trigger
The on condition can be used with in-built list of triggers as follows:
@defer (on viewport) {
<large-component />
} @placeholder {
<p>Some component</p>
}
The available triggers are as follows:
on idle: This will be triggered when the browser is idle, i.e. when the browser is not busy with other tasks.on viewport: This is triggered when the deferred content enters to the viewport, i.e. when the content is scrolled and is visible to the viewer. This is ideal to lazy load below the fold content.on interaction: This is triggered when user interacts with the placeholder or any surrounding content. This can be triggered with events likeclickorkeydown.on hover: This is triggered when the user hovers over the placeholder or any surrounding element.on immediate: This is triggered immediately without a delay. This can be used to trigger the deferred view immediately.on timer(x): This can be used to trigger the@deferblock after a certain duration. You can specify the duration using in milliseconds (ms) or seconds (s).
Note: You can specify a template reference variable as the triggering target for on viewport, on interaction and on hover.
<div #greeting>Hello!</div>
@defer (on viewport(greeting)) {
<large-component />
} @placeholder {
<p>Some component</p>
}
You can also use multiple on conditions. Remember multiple on conditions always treated as OR conditions.
@defer (on viewport; on timer(5s)) {
<large-component />
} @placeholder {
<p>Some component</p>
}
The when Trigger
The when condition accepts an expression that returns a boolean. The deferred content will be triggered if the when condition is truthy. This can be used to specify your own custom triggers. Remember, even if when condition turns to false, @defer block that has already been loaded will not switch back to the placeholder.
@defer (when someCondition) {
<large-component />
}
You can also use when conditions with on conditions. Using mixed when and on conditions are treated as OR conditions.
@defer (on viewport; when someCondition) {
<large-component />
}
Prefetching dependencies
Deferrable views lets you control when to prefetch the dependencies as well. you can use prefetch keyword to specify when to prefetch the dependencies. You can use the same trigger conditions that were mentioned above.
@defer (on viewport; prefetch on idle) {
<large-component />
}
In the above example, prefetching will be initiated when the browser is idle and the deferred content will be loaded when the block enters the viewport.
Conclusion
Using Angular deferrable views can significantly improve your Angular application performance. It can improve the overall user experience of the application. Deferrable views provides control for the developer to decide when and how the content should be loaded. Implementing deferrable views are not that hard and it will be a useful improvement for your application. Hope this quick guide to Angular deferrable views helped you to learn how to use deferrable views in your Angular project. Additionally, read the official documentation on Angular Deferrable Views for more information.
