What are Deferrable Views (@defer) and how do they work in Angular 17+?

Q: What are Deferrable Views (@defer) and how do they work in Angular 17+?

**Target Audience:** Angular developers who know components and want to cut the initial bundle without restructuring routes. **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 runnable example was compiled with ngc (strict templates) and also run in playground mode on Angular 22.2.3, then clicked by a script; the error-state and compile-error checks were separate small runs. Download times on a real network were not measured. ## 1. Why This Even Matters — A Story First A restaurant menu has a page of desserts. The kitchen could bake every dessert the moment the restaurant opens, just in case. Most would be thrown away, and the oven would be busy when the main courses need it. Instead, the dessert page says "ask your waiter". The ingredients are in the fridge, the recipe is known, but nothing is baked until somebody or

The problem

Question presented to candidate: "Our product page ships the comments widget and a chart library in the main bundle even though most users never scroll to them. What are deferrable views in Angular, how do the @defer blocks fit together, and what happens at runtime?"

What a strong answer should cover:

@defer (v17, stable v18) lazily loads a part of a template and the code of the standalone components, directives and pipes inside it.
The companion blocks: @placeholder, @loading, @error, with minimum and after timing options.
Triggers: default on idle; on viewport | interaction | hover | timer(...) | immediate, when expr; plus prefetch variants.
Runtime states: placeholder, then loading, then complete or error.
Requirements and limits: dependencies must be isolated to split; a trigger without a target needs a @placeholder.
SSR: the placeholder is server-rendered; hydrate triggers change that.

Clarifying questions expected:

"Do we render on the server? That changes what crawlers see inside the block."
"Is the heavy code only used in this section, or imported elsewhere too?"

Code / implementation expected: Yes — a @defer block with placeholder, loading and error states.

performance
routing
defer

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: Angular developers who know components and want to cut the initial bundle without restructuring routes. 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 runnable example was compiled with ngc (strict templates) and also run in playground mode on Angular 22.2.3, then clicked by a script; the error-state and compile-error checks were separate small runs. Download times on a real network were not measured.

1. Why This Even Matters — A Story First

A restaurant menu has a page of desserts. The kitchen could bake every dessert the moment the restaurant opens, just in case. Most would be thrown away, and the oven would be busy when the main courses need it.

Instead, the dessert page says "ask your waiter". The ingredients are

The solution is hidden so you can try first

8 min read · 9 sections

Read the code

AngularA product page that loads comments on click, with placeholder, loading and error blocks

Open in playground

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

// In a real app this component lives in its own file and is used ONLY inside
// @defer, so the compiler moves it into a separate lazy chunk.
@Component({
  selector: "app-comments",
  template: `<ul><li>Great tea</li><li>Arrived fast</li></ul>`,
})
export class CommentsComponent {}

@Component({
  selector: "app-root",
  imports: [CommentsComponent],
  template: `
    <h3>Product page</h3>
    @defer (on interaction; prefetch on idle) {
      <app-comments />
    } @placeholder (minimum 500ms) {
      <button>Show comments</button>
    } @loading (after 100ms; minimum 300ms) {
      <p>Loading comments...</p>
    } @error {
      <p>Could not load comments.</p>
    }
  `,
})
export class AppComponent {}

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.