Deferred Loading with @defer

@defer loads its template only when the trigger condition is met, reducing initial bundle size and improving page load.

Basic @defer

@Component({
  selector: 'app-dashboard',
  template: `
    <h1>Dashboard</h1>

    @defer {
      <app-heavy-chart />
    } @placeholder {
      <p>Chart will appear here...</p>
    }
  `,
})
export class DashboardComponent {}

@defer Blocks

@defer {
  <!-- Main content: loaded when trigger fires -->
  <app-heavy-component />
} @placeholder {
  <!-- Shown before the trigger fires -->
  <p>Loading...</p>
} @loading {
  <!-- Shown while the deferred chunk downloads -->
  <p>Downloading...</p>
} @error {
  <!-- Shown if loading fails -->
  <p>Failed to load component</p>
}

Trigger Types

Triggers control when deferred content loads. Choose the right trigger for each scenario.

viewport Trigger

Loads when the element enters the viewport (uses Intersection Observer):

@defer (on viewport) {
  <app-image-gallery />
} @placeholder {
  <div class="skeleton-loader"></div>
}

interaction Trigger

Loads when the user interacts with the placeholder:

@defer (on interaction) {
  <app-comments />
} @placeholder {
  <button>Load Comments</button>
}

timer Trigger

Loads after a specified delay:

@defer (on timer(5s)) {
  <app-newsletter-signup />
} @placeholder {
  <p>Newsletter will appear in 5 seconds...</p>
}

hover Trigger

Loads when the user hovers over the placeholder:

@defer (on hover) {
  <app-tooltip-content />
} @placeholder {
  <span>Hover for details</span>
}

Combining Triggers

@defer (on interaction; on timer(10s)) {
  <app-recommendations />
} @placeholder {
  <p>Click here or wait 10 seconds</p>
}

Practical Example: E-commerce Product Page

<div class="product-page">
  <h1>{{ product.name }}</h1>
  <p>{{ product.price | currency }}</p>

  <!-- Heavy reviews section deferred until visible -->
  @defer (on viewport) {
    <app-product-reviews [productId]="product.id" />
  } @placeholder {
    <div class="reviews-skeleton"></div>
  }

  <!-- Newsletter signup deferred until idle -->
  @defer (on idle) {
    <app-newsletter-signup />
  } @placeholder {
    <div class="newsletter-placeholder"></div>
  }
</div>

Performance Benefits

1. Smaller initial bundle — Deferred components are separate chunks
2. Faster initial paint — Only essential content loads first
3. Bandwidth savings — Heavy components download only when needed
4. Better Core Web Vitals — Improved LCP and INP