Signals & Modern Angular

Angular Deferrable Views defer

@defer delays loading part of a template — and the JavaScript behind it — until a trigger fires: the block enters the viewport, the user interacts, the browser is idle, or a timer elapses.

What is Deferrable Views defer in Angular?

@defer delays loading part of a template — and the JavaScript behind it — until a trigger fires: the block enters the viewport, the user interacts, the browser is idle, or a timer elapses.

Why Deferrable Views defer matters

It gives per-block lazy loading declaratively in the template, with no routing changes and no dynamic import code. Heavy widgets stop costing anything for users who never scroll to them.

Deferrable Views defer example

Defer a heavy chart until it scrolls into view

HTML

@defer (on viewport) {
  <app-salary-chart [data]="data" />
} @placeholder (minimum 300ms) {
  <div class="chart-skeleton"></div>
} @loading (after 100ms; minimum 400ms) {
  <app-spinner />
} @error {
  <p>Could not load the chart.</p>
}

Key points to remember

The deferred component must be a standalone component used only inside the block.
@placeholder should match the real content’s size to avoid layout shift.
prefetch triggers can download the chunk early without rendering it.

Available triggers

Trigger	Fires when
on idle	the browser is idle (the default)
on viewport	the block scrolls into view
on interaction	the user clicks or focuses the placeholder
on hover	the pointer enters the placeholder
on timer(5s)	after the given delay
when condition	a component expression becomes true

Common mistakes with Deferrable Views defer

Importing the deferred component elsewhere in the same file, which pulls it into the main bundle.
A placeholder much smaller than the real content, causing a visible jump.