+- Anna University Plus (https://annauniversityplus.com)
+-- Forum: Front-End JavaScript (https://annauniversityplus.com/Forum-front-end-javascript)
+--- Forum: Angular (https://annauniversityplus.com/Forum-angular)
+--- Thread: Angular Deferrable Views Complete Guide: Lazy Load Components Within Pages 2026 (/angular-deferrable-views-complete-guide-lazy-load-components-within-pages-2026)
Angular Deferrable Views Complete Guide: Lazy Load Components Within Pages 2026 - indian - 03-22-2026
Deferrable Views (the @defer block) are one of Angular's most powerful performance features. Unlike route-level lazy loading which loads code per page, @defer enables lazy loading of individual components within a single page. This is a game-changer for complex Angular applications in 2026.
What Are Deferrable Views?
@defer is a built-in Angular template syntax that lazily loads a component, directive, or pipe and its dependencies. The code is not loaded until a specified trigger condition is met.
This means:
- Heavy components do not add to the initial bundle
- Code loads only when the user actually needs it
- No JavaScript wrapper modules or manual dynamic imports
- Built-in loading, placeholder, and error states
Important Requirement
@defer only works with standalone components. If you are still using NgModule-based components, they must be migrated to standalone before using @defer.
Trigger Types
Angular provides multiple trigger conditions:
1. on viewport: Loads when the element enters the browser viewport (most common)
2. on interaction: Loads when the user interacts with a specified element (click, focus)
3. on hover: Loads when the user hovers over a specified element
4. on idle: Loads when the browser is idle (requestIdleCallback)
5. on timer(ms): Loads after a specified delay
6. on immediate: Loads immediately after non-deferred content renders
7. when (condition): Loads when a boolean expression becomes true
Built-in Block Types
@defer blocks support companion blocks for managing the loading experience:
@placeholder: Shows while the deferred content has not started loading. Can specify a minimum display time to prevent flickering.
@loading: Shows while the deferred content is being loaded. Also supports minimum display time.
@error: Shows if loading the deferred content fails.
Real-World Use Cases
1. Heavy Charts and Data Visualizations:
Defer chart libraries (like ECharts or D3) until the chart section scrolls into view. This can save 200KB+ from the initial bundle.
2. Rich Text Editors:
Load editors like Quill or TinyMCE only when the user clicks the edit button.
3. Comments Section:
Defer the comments component until the user scrolls to the bottom of an article.
4. Admin Panels:
Defer complex configuration UIs that most users never access.
5. Map Components:
Load Google Maps or Mapbox only when the map area enters the viewport.
Prefetching
Deferred views can be prefetched before the trigger fires:
- prefetch on idle: Start downloading code when browser is idle
- prefetch on hover: Start downloading when user hovers near the area
- Combines background download with trigger-based rendering
This eliminates the loading delay when the trigger fires because the code is already downloaded.
Performance Impact
In real applications, @defer can:
- Reduce initial bundle size by 30-50% for content-heavy pages
- Improve LCP by keeping the critical rendering path lean
- Reduce Time to Interactive significantly
- Enable complex features without performance penalty
Best Practices
1. Use on viewport for below-the-fold content
2. Combine prefetch with interaction triggers for instant-feeling loads
3. Always provide a @placeholder with realistic dimensions to prevent layout shift
4. Set minimum times on @loading to prevent flash of loading state
5. Use @error blocks to handle network failures gracefully
Keywords: Angular defer, Angular deferrable views, Angular lazy loading components, Angular performance 2026, Angular code splitting, Angular @defer tutorial, Angular viewport loading, Angular bundle optimization
Have you started using @defer in your Angular projects? What components have you deferred and what impact did you see? Share your results!