angular-deferrable

Angular 遅延可能ビュー

バージョン： Angular 17+ (2025) タグ： @defer、遅延可能、遅延読み込み

参考資料： 遅延可能ビュー

ベストプラクティス

• ビューポート表示時に @defer を使用します

@Component({
  template: `
    @defer (on viewport) {
      <heavy-chart />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class DashboardComponent {}

• 操作時に @defer を使用します

@Component({
  template: `
    <button (click)="showModal = true">Open</button>
    @defer (when showModal) {
      <modal-component />
    }
  `
})
export class MyComponent {}

• ホバー時に @defer を使用します

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
  `
})
export class TooltipWrapper {}