indian

03-22-2026, 01:45 PM #1

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!