Angular 17 deferred loading On Interaction | Angular Feature defer loading

Veröffentlicht am: 11 Februar 2024
auf dem Kanal: Code Sample
77
3

Angular 17 Feature deferred loading | Angular 17 Defer block: Create Lazy Loaded components with `when` trigger! Learn how to create a lazy-loaded component in Angular 17 using the new defer block with the `when` trigger. It's really powerful!

Angular 17 Feature: deferred loading: Using @defer in Angular 17 to implement lazy loading.

Angular 17 introduced a new @defer block that lets your lazy-load content based on specific conditions or events and deferred blocks support the following declarative trigger types:

1. on interaction - @defer (on interaction)
2. on hover - @defer (on hover)
3. on idle - @defer (on idle)
4. on timer - @defer (on timer(4s))
5. on viewport - @defer (on viewport)

Angular renders the on-interaction block when the user interacts with its @placeholder block. An interaction can be a click, touch focus, or input event, like keypress.

@defer (on interaction) {
Content block: Clicked on the interaction
}
@placeholder {
Content block: Placeholder – on interaction(click on it)
}
@error {
Content block: Error
}
@loading(minimum 2s) {
Loading...
}

Angular 17 Tutorial:-
*********************
Install Angular 17 with Standalone (true):-    • Install Angular 17 CLI on Windows | U...  
Angular 17 Routing For Beginners:-    • Angular 17 Routing For Beginners | Ro...  
Angular 17 Signals:-    • Angular 17 Signals Example |  Angular...  
What Is Server-Side Rendering (SSR) and Why use?:-    • Angular 17 Tutorial - Server-Side Ren...  
Angular 17 Component Inheritance:-    • Angular 17 Tutorial | Angular 17 Comp...  
using ViewContainerRef To Render Dynamic Components:-    • Angular 17 Tutorial | using ViewConta...  
Component Lifecycle Hooks:-    • Angular 17 Tutorial | Component Lifec...  
Prerendering Static Site Generation (SSG):-    • Angular 17  Tutorial | Prerendering S...  
Angular 17 for loop @for block Repeaters :- ttps://   • Angular 17 for loop example | @for bl...  
Angular 17 if else statement example:-    • Angular 17 if else statement example ...  
What's New in Angular 17?:-    • What's New in Angular 17 | The Best N...  

#angular17 #Angular17defer #loading #AngularLazyloading #AngularDeferrableView #AngularInteraction #AngularHover #AngularIdle #AngularTimer #AngularViewport


Auf dieser Seite können Sie das Online-Video Angular 17 deferred loading On Interaction | Angular Feature defer loading mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Code Sample 11 Februar 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 77 Mal angesehen und es wurde von 3 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!