Angular Deferrable Views: Improving App Performance and Experienc...
summary
Angular 17 introduces template-level lazy loading called Deferrable Views that splits components, directives, and pipes into loadable chunks and fetches them on triggers instead of only at the router. It provides four template blocks—@defer, @loading, @placeholder, and @error—to declare what to load, what to show during loading, a placeholder and an error UI; triggers include declarative triggers (hover, viewport), prefetch, and custom boolean/signal triggers. A demo shows fetching chunks on hover or when an offscreen target enters the viewport and uses a 1s minimum loading display to avoid flicker.
AI-written summary · about
chapters (4)
- 0:00Introduction to deferrable views
- 2:49What are deferrable views
- 6:59Practical demo
- 13:26Conclusion and resources
