Angular 17 - Trigger options for @defer block

@defer includes several config options to display errors, placeholder, and loading templates.

Let's focus on the possible triggers for such lazy loading.

⚡idle

This is the default option. Will load the contents of that block once the browser is in an idle state:

⚡viewport

Triggers the deferred block when its content enters the viewport. For instance, that would be when the user scrolls down, and the block becomes "visible." Note that this option requires a placeholder (used to detect when the element comes into the viewport):

Another interesting option is to load the deferred block when another specified element makes it into the viewport using a template reference variable. That option does not require a placeholder:

⚡interaction

Waits for the user to interact with the placeholder to load the deferred block. Even better, this trigger can be combined with another element so you can lazy-load a component on a button click, for instance:

⚡hover

Similar to the two previous examples. Waits for the user to hover over the placeholder or a specified element:

⚡immediate and timer

immediate triggers the deferred block immediately as soon as Angular has finished rendering. timer waits for a specified delay:

---

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs
• dev.to: https://dev.to/nhannguyendevjs
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs