Deferrable Views are one of the most powerful performance-boosting features introduced with Angular’s modern rendering architecture. They allow developers to delay the rendering of specific parts of the UI until certain conditions are met — such as user interaction, visibility, or data availability.
This feature significantly minimizes initial load times and reduces JavaScript execution during the first paint.
Why Did Angular Introduce Deferrable Views?
Traditional Angular lazy loading works only at the route level, which limits fine-grained performance optimization. With Angular 21, developers now have a new tool to defer rendering inside a component, providing:
- Faster initial page renders
- Lower JavaScript payload
- Better control of “when” content loads
- Improved runtime performance on slow devices
How Deferrable Views Work
Angular introduces a new syntax inside templates using the @defer block:
@defer (on viewport) {
<app-expensive-widget />
}
This code means:
👉 The component <app-expensive-widget> will render only when it becomes visible in the viewport.
Supported Triggers for Deferrable Views
Angular 21 supports multiple intuitive rendering triggers:
1. on idle
Defers rendering until the browser finishes essential tasks.
@defer (on idle) { ... }
2. on interaction
Renders only when the user interacts (e.g., click, hover).
<button (click)="load = true">Show More</button>
@defer (on interaction(load)) {
<app-details />
}
3. on viewport
Loads when the element becomes visible on screen.
4. on timer
Loads after a specific time delay.
@defer (on timer(2000)) { ... }
5. on hover / on focus
Perfect for tooltips, dropdowns, and rich previews.
Benefits of Using Deferrable Views
✅ Reduced Initial Bundle Size
Only essential components load upfront.
✅ Improved Page Speed & Core Web Vitals
Especially helpful for large dashboards, charts, and heavy UI widgets.
✅ Smooth User Experience
Load heavy content only when it’s truly needed.
✅ Fine-Grained Lazy Loading
No longer limited to Angular routes — now possible inside components.
Real-World Example
<h1>Angular Dashboard</h1>
@defer (on viewport) {
<app-analytics-chart />
} @placeholder {
<p>Loading chart…</p>
} @error {
<p>Failed to load analytics data.</p>
}
This example shows:
- Placeholder displayed while script downloads
- Chart loads only when scrolled into view
- Error block handles failures gracefully
When Should You Use Deferrable Views?
Use them when:
✔ Components are heavy (charts, maps, editors)
✔ Content is below the fold
✔ You want to optimize initial load
✔ Data-heavy modules need time to fetch
✔ User interaction should control rendering
Avoid them for essential UI elements that must load immediately.
Conclusion
Deferrable Views are a game changer for Angular 21 developers who want faster apps and better performance. They offer flexible lazy-rendering options that work inside normal components, giving you control like never before.
With Angular 21’s commitment to speed and DX improvements, Deferrable Views are now one of the most recommended features for all modern Angular apps.
View More Angular 21 Updates:
https://savanka.com/category/news/angular-21-features
