Deferrable Views (@defer)

Lazy load components using Angular’s built-in @defer block.

Basic @defer

@Component({
  template: `
    @defer {
      <app-comments [albumId]="albumId"></app-comments>
    } @placeholder {
      <p>Click to load comments</p>
    }
  `
})
export class DetailComponent {
  albumId = input.required<number>();
}

@defer Triggers

on interaction

Load when user interacts with the trigger element:

@defer (on interaction) {
  <app-comments [albumId]="albumId"></app-comments>
} @placeholder {
  <a>Load comments</a>
}

on viewport

Load when element enters viewport:

@defer (on viewport) {
  <app-heavy-chart [data]="chartData"></app-heavy-chart>
} @placeholder {
  <div style="height: 400px">Chart will load when visible</div>
}

on idle

Load when browser is idle:

@defer (on idle) {
  <app-analytics-widget></app-analytics-widget>
} @placeholder {
  <div>Loading analytics...</div>
}

on immediate

Load immediately (useful for testing):

@defer (on immediate) {
  <app-widget></app-widget>
}

on timer

Load after specified milliseconds:

@defer (on timer(5000)) {
  <app-ads></app-ads>
} @placeholder {
  <div>Ad loads in 5 seconds</div>
}

on hover

Load when user hovers over trigger:

@defer (on hover) {
  <app-tooltip [content]="tooltipText"></app-tooltip>
} @placeholder {
  <span>Hover for more info</span>
}

@loading Block

Show content while lazy chunk loads:

@defer (on interaction) {
  <app-comments></app-comments>
} @loading {
  <p>Loading comments...</p>
} @placeholder {
  <a>Load comments</a>
}

minimum and after

Control when loading state shows:

@defer (on interaction) {
  <app-comments></app-comments>
} @loading (after 100ms; minimum 1s) {
  <p>Loading...</p>
} @placeholder {
  <a>Load comments</a>
}

• after - Delay before showing loading state
• minimum - Minimum time to show loading state (prevents flash)

@error Block

Handle loading failures:

@defer (on viewport) {
  <app-comments></app-comments>
} @error {
  <p>Failed to load comments. Please try again.</p>
} @placeholder {
  <div>Comments section</div>
}

@placeholder Block

Content shown before deferral triggers:

@defer (on viewport) {
  <app-heavy-component></app-heavy-component>
} @placeholder (minimum 500ms) {
  <div class="skeleton">Loading...</div>
}

Multiple Triggers

Combine multiple trigger conditions:

@defer (on interaction; on timer(5000)) {
  <app-widget></app-widget>
} @placeholder {
  <div>Widget loads on click or after 5s</div>
}

Prefetching

Prefetch lazy chunk before showing:

@defer (on interaction; prefetch on idle) {
  <app-comments></app-comments>
} @placeholder {
  <a>Load comments</a>
}

Named Triggers

Use specific elements as triggers:

<button #loadBtn>Load Comments</button>

@defer (on interaction(loadBtn)) {
  <app-comments></app-comments>
} @placeholder {
  <p>Click button above to load</p>
}

Complete Example

@Component({
  template: `
    <div class="album-detail">
      <h1>{{ album.name }}</h1>
      <p>{{ album.description }}</p>

      @defer (on interaction; prefetch on idle) {
        <app-comments [albumId]="album.id"></app-comments>
      } @loading (after 200ms; minimum 1s) {
        <div class="loading-spinner">
          <p>Loading comments...</p>
        </div>
      } @placeholder {
        <a class="load-link">Load comments</a>
      } @error {
        <p class="error">Failed to load comments.</p>
      }
    </div>
  `
})
export class AlbumDetailComponent {
  album = input.required<Album>();
}

Nested @defer

@defer (on viewport) {
  <app-section>
    @defer (on interaction) {
      <app-nested-component></app-nested-component>
    } @placeholder {
      <button>Load more</button>
    }
  </app-section>
} @placeholder {
  <div>Section placeholder</div>
}

Testing Deferrable Views

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';

describe('DeferrableViews', () => {
  it('should render placeholder initially', () => {
    @Component({
      template: `
        @defer {
          <app-comments></app-comments>
        } @placeholder {
          <p>Placeholder</p>
        }
      `
    })
    class TestComponent {}

    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toContain('Placeholder');
  });
});

When to Use @defer

✅ Good use cases:

• Heavy components (charts, editors)
• Below-the-fold content
• Components with large dependencies
• Modal/dialog content
• Comments sections
• Admin features

❌ Avoid for:

• Critical above-the-fold content
• Small components
• Components needed immediately
• Navigation elements

Performance Benefits

// ❌ Bad: Eagerly loads heavy component
@Component({
  template: `
    @if (showComments()) {
      <app-comments></app-comments>
    }
  `
})

// ✅ Good: Lazy loads on demand
@Component({
  template: `
    @defer (on interaction) {
      <app-comments></app-comments>
    } @placeholder {
      <a>Load comments</a>
    }
  `
})

Best Practices

• Use @loading with after to avoid loading flashes
• Use minimum to prevent loading flash on fast connections
• Prefetch on idle for better UX
• Use @error for robust error handling
• Combine triggers for flexibility
• Use @placeholder (minimum) to prevent layout shifts
• Defer heavy third-party components
• Test deferrable views in slow network conditions

Bundle Size Impact

# Before @defer
main.js: 500kb (includes CommentsComponent)

# After @defer
main.js: 350kb
lazy-comments.js: 150kb (loaded on demand)