Deferrable views
@defer lets a template render part of itself lazily — the deferred component and its dependencies are split into a separate chunk and fetched only when a trigger fires. Ship less JavaScript up front, hydrate heavy UI on demand, and keep the initial render fast for better Core Web Vitals. Every chart below is synthetic and deterministic.
Pick a trigger
linkedSignal · derived, but writable
A computed is read-only — great for a value you only ever read. But a selection is both derived (it should default from its source) and writable (the user picks). linkedSignal is exactly that: it re-derives when its source changes, yet accepts a manual write that sticks until the next source change. Swap the dataset and the selection snaps back to the first region; pick a region and your choice holds.
1 · @defer (on viewport)
The chart below renders only once it scrolls into view. While its chunk loads you see a skeleton (@placeholder); a @loading (minimum 300ms) state then prevents a flash if the chunk arrives almost instantly.
Scroll down inside this box to trigger the deferred chart ↓
2 · @defer (on interaction)
Nothing is fetched until you interact. Click the trigger and the chart's chunk loads on demand — the common pattern for a panel a user might never open.
3 · @defer (on idle)
With on idle Angular waits for the browser to finish its urgent work, then renders during an idle period. It's the default trigger and a good fit for non-critical extras.
4 · @defer (on timer(2s))
A fixed on timer(2s) delay — you'll see the placeholder, then the loading state, then the chart after two seconds. Handy for staged reveals.