Deferrable Views (@defer) in Angular
From the Angular cheat sheet · Templates & Directives · verified Jul 2026
Deferrable Views (@defer)
Lazy-load template chunks with @defer blocks (Angular 17+).
typescript
<!-- Basic @defer with @loading / @error / @placeholder -->
@defer {
<heavy-chart [data]="data" />
} @loading {
<p>Loading chart...</p>
} @placeholder {
<p>Chart will appear here</p>
} @error {
<p>Failed to load</p>
}
<!-- @defer with triggers -->
@defer (on viewport) {
<comments-section />
}
@defer (on idle) {
<analytics-widget />
}
@defer (on interaction) {
<chat-widget />
}💡 @defer auto-code-splits its block into a separate chunk
⚡ on viewport + prefetch on idle is the most common pattern for below-the-fold widgets
📌 @placeholder/@loading/@error are all optional but recommended for UX
🔥 minimum X prevents flicker when content loads faster than the placeholder
Continue with Angular
Save the full cheat sheet or work through every related task.