@defer
Lazily loads template content based on a trigger to improve performance.
Syntax
@defer (on trigger) { ... } @placeholder { ... } @loading { ... } @error { ... }Parameters
| Name | Type | Required | Description |
|---|---|---|---|
trigger | expression | No | When to load, e.g. on idle, on viewport, on interaction, when cond. |
Returns
template block — Renders deferred content after the trigger fires.
Examples
@defer (on viewport) {
<app-heavy-chart />
} @placeholder {
<div class="skeleton"></div>
} @loading (minimum 500ms) {
<app-spinner />
} @error {
<p>Could not load</p>
}
Notes
`@defer` code-splits its content and its component imports into a separate
chunk loaded on the chosen trigger (idle, viewport, interaction, hover, timer,
immediate, or a `when` condition). `@placeholder` is shown before loading and
is required for some triggers; `@loading` and `@error` are optional.