What is the Angular @defer block?

The @defer block (Angular 17+) enables declarative lazy loading of template content and components directly in templates — no JavaScript routing configuration needed. It replaces third-party solutions for progressive loading. Basic syntax: @defer { <heavy-chart-component/> } @placeholder { <p>Chart will appear here</p> } @loading { <mat-spinner/> } @error { <p>Failed to load chart</p> }. Trigger types: @defer (on idle) — loads when browser is idle (requestIdleCallback); @defer (on viewport) — loads when placeholder enters viewport (IntersectionObserver); @defer (on interaction) — loads on first interaction (click, focus, hover) with the placeholder; @defer (on hover) — on hover; @defer (on timer(5s)) — after 5 seconds; @defer (on immediate) — no delay, but still async (component lazy-loaded); @defer (when isAdminUser()) — loads when condition becomes true. Prefetch: separate when to prefetch from when to render: @defer (on interaction; prefetch on idle) { ... } — render on interaction, but start downloading the code while browser is idle. Multiple triggers: @defer (on viewport; on timer(2s)) — loads when EITHER condition is met. Minimum loading time: @loading (after 100ms; minimum 1s) { ... } — show loading only if it takes more than 100ms, then show for at least 1s. Impact: @defer enables granular code splitting at the template level without complex routing configuration.