How does the @defer block work and what triggers are available?

Q: How does the @defer block work and what triggers are available?

**Target Audience:** Developers who know what @defer is and need to choose and combine triggers correctly. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The trigger timeline in section 4 came from running the example on Angular 22.2.3 in both verifier modes (AOT with ngc , and playground JIT) with a script that waits, clicks and hovers. jsdom is not a real browser: idle timing and viewport behave differently there, and the doc says where. ## 1. Why This Even Matters — A Story First A hotel has many ways to decide when to make up a room. Housekeeping can do it the moment the guest checks out (immediate), at 11 o'clock sharp (timer), whenever the staff have a quiet moment (idle), when the guest walks down that corridor (viewport), when the guest presses the call button (interaction), when the gu

The problem

Question presented to candidate: "Walk me through what happens when Angular meets a @defer block, then list the triggers you can use, and pick the right one for: a below-the-fold reviews section, a settings panel behind a button, and a chat widget that should load once the page is quiet."

What a strong answer should cover:

The sequence: placeholder rendered, trigger fires, dependency function loads code, content swaps in (or @error).
on triggers: idle (default), immediate, timer(...), viewport, interaction, hover; targets via template references.
when expr: loads when truthy, one-shot.
Multiple triggers are OR-ed; prefetch and hydrate variants are separate families.
Sensible choices: viewport for reviews, interaction/hover (+ prefetch on hover) for the panel, idle or timer for the chat widget.
Constraints: triggers without a target need a @placeholder; viewport needs IntersectionObserver.

Clarifying questions expected:

"Is the page server-rendered? Then hydrate triggers may matter too."

Code / implementation expected: Yes — a template with several @defer blocks using different triggers.

defer
performance
lazy-loading

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know what @defer is and need to choose and combine triggers correctly. Difficulty: Medium

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The trigger timeline in section 4 came from running the example on Angular 22.2.3 in both verifier modes (AOT with ngc, and playground JIT) with a script that waits, clicks and hovers. jsdom is not a real browser: idle timing and viewport behave differently there, and the doc says where.

1. Why This Even Matters — A Story First

A hotel has many ways to decide when to make up a room. Housekeeping can do it the moment the guest checks out (immediate), at 11 o'clock sharp (timer), whenever the staff have a quiet moment (idle), when the guest walks down that corridor (viewport), when the guest pr

The solution is hidden so you can try first

9 min read · 9 sections

Read the code

AngularSix @defer blocks, one per trigger, driven by a script

Open in playground

import { Component, signal } from "@angular/core";

@Component({
  selector: "app-panel",
  template: `<span>[{{ name }} loaded]</span>`,
  inputs: ["name"],
})
export class PanelComponent {
  name = "";
}

@Component({
  selector: "app-root",
  imports: [PanelComponent],
  template: `
    <h3>Defer triggers</h3>

    @defer (on immediate) { <app-panel name="immediate" /> } @placeholder { <span>[immediate waiting]</span> }

    @defer (on idle) { <app-panel name="idle" /> } @placeholder { <span>[idle waiting]</span> }

    @defer (on timer(300ms)) { <app-panel name="timer" /> } @placeholder { <span>[timer waiting]</span> }

    @defer (on interaction) { <app-panel name="interaction" /> } @placeholder { <button id="open">[click me]</button> }

    @defer (on hover(hoverTarget)) { <app-panel name="hover" /> } @placeholder { <span>[hover waiting]</span> }
    <em #hoverTarget id="hover">hover here</em>

    @defer (when ready()) { <app-panel name="when" /> } @placeholder { <span>[when waiting]</span> }
    <button id="ready" (click)="ready.set(true)">set ready</button>
  `,
})
export class AppComponent {
  ready = signal(false);
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.