0Pricing
Angular Academy · Lesson

Deferred Loading with @defer

Lazy-load template sections with @defer.

Deferred Loading with defer

The at-defer block lazily loads part of a template and its dependencies, improving initial load performance. The deferred content is split into a separate chunk.

Basic defer Syntax

Wrap content in an at-defer block. By default it loads when the browser is idle.

// @defer {
//   <app-heavy-chart></app-heavy-chart>
// }

All lessons in this course

  1. Conditional Rendering with @if
  2. Looping with @for
  3. Switching with @switch
  4. Deferred Loading with @defer
← Back to Angular Academy