Angular 18 #12 - Deferrable views Triggers(Idle, viewport, Interaction, hover, immediate & Timer)

*Deferrable View*

When a @defer block is triggered, it replaces placeholder content with lazily loaded content. There are two options for configuring when this swap is triggered: on and when.

on specifies a trigger condition using a trigger from the list of available triggers below. An example would be on interaction or on viewport.

Multiple event triggers can be defined at once. For example: on interaction; on timer(5s) means that the defer block will be triggered if the user interacts with the placeholder, or after 5 seconds.

i.) Idle
ii.) viewport
iii.) Interaction
iv.) hover
v.) immediate
vi.) Timer

*Prefetching*
@defer allows to specify conditions when prefetching of the dependencies should be triggered. You can use a special prefetch keyword. prefetch syntax works similarly to the main defer conditions, and accepts when and/or on to declare the trigger.