Скачать или смотреть Angular 18 #13 - Deferrable Views Triggers - Prefetch & When(To call custom trigger event)

Click to watch Angular Playlist:    • Angular 18  

To view the code of this tutorial. Please visit this Github link: https://github.com/lets-build-with-co...

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.