angular-control-flow

Angular コントロールフロー

バージョン： Angular 17+（2025） タグ： コントロールフロー、@if、@for、@switch、@defer

参考資料： コントロールフロー • 遅延ビュー

API の変更点

このセクションでは、最近のバージョン固有の API の変更点について説明します。

• 新機能：@if は *ngIf を置き換えます — 新しい制御フロー構文です

• 新機能：@for は *ngFor を置き換えます — track を使う新しいループ構文です

• 新機能：@switch は ngSwitch を置き換えます — 新しい switch 構文です

• 新機能：@defer — コンポーネントを遅延読み込みします

• 非推奨：*ngIf、*ngFor、*ngSwitch — 新しい構文に移行してください

ベストプラクティス

• 条件分岐には @if を使用します

@Component({
  template: `
    @if (isLoggedIn) {
      <p>Welcome!</p>
    } @else {
      <p>Please login</p>
    }
  `
})
export class MyComponent {
  isLoggedIn = signal(false);
}

• @else if を使用します

@Component({
  template: `
    @if (user.role === 'admin') {
      <p>Admin panel</p>
    } @else if (user.role === 'user') {
      <p>User dashboard</p>
    } @else {
      <p>Guest view</p>
    }
  `
})
export class MyComponent {}

• ループには @for を使用します

@Component({
  template: `
    @for (item of items; track item.id) {
      <li>{{ item.name }}</li>
    }
  `
})
export class MyComponent {
  items = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
}

• パフォーマンス向上のために track を使用します

@for (user of users; track user.id) {
  <li>{{ user.name }}</li>
}

• 空のリストには @empty を使用します

@Component({
  template: `
    @for (item of items; track item.id) {
      {{ item.name }}
    } @empty {
      <p>No items found</p>
    }
  `
})
export class MyComponent {}

• 条件分岐には @switch を使用します

@Component({
  template: `
    @switch (status) {
      @case ('loading') {
        <p>Loading...</p>
      }
      @case ('success') {
        <p>Success!</p>
      }
      @case ('error') {
        <p>Error occurred</p>
      }
      @default {
        <p>Unknown status</p>
      }
    }
  `
})
export class MyComponent {
  status = 'loading';
}

• 遅延読み込みには @defer を使用します

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

• 条件とともに @defer を使用します

@Component({
  template: `
    @defer (on hover) {
      <tooltip />
    }
    
    @defer (when isReady) {
      <ready-component />
    }
  `
})
export class MyComponent {}

• *ngIf から移行します

ng generate @angular/core:control-flow

• @if で else を使用します

@if (condition) {
  content
} @else {
  alternative
}