Angular - Control Flowと構造ディレクティブを使用した書き方との比較

Angularのv17にてControl Flowが新たに追加されたということで、@if、@for、@switchを使用した書き方を*ngIfなどの構造ディレクティブを使用した書き方と比較とした形でまとめてみました。

@if

**ngIfを使用した場合

<p *ngIf="isLoggedIn else notLoggedIn">ログインしています。</p>

<ng-template #notLoggedIn>
  <p>ログインしていません。</p>
</ng-template>

@ifを使用した場合

@if (isLoggedIn) {
  <p>ログインしています。</p>
} @else {
  <p>ログインしていないです。</p>
}

@ifを使用する場合は、@else ifと書くこともできます。

@if (x > y) {
  <p>xはyの値はより大きいです</p>
} @else if (x < y) {
  <p>xはyの値はより小さいです</p>
} @else {
  <p>xとyの値は等しいです</p>
}

@for

*ngForを使用した場合

<ul>
    <li *ngFor="let user of users">
        {{user.name}}
    </li>
</ul>

@forを使用した場合

@forを使用する場合、@emptyも使用することができます。またtrackの設定が必須となります。

<ul>
    @for (user of users; track user.id) {
        <li>{{user.name}}</li>
    }
    @empty {
        <li>ユーザーが存在しません。</li>
    }
</ul>

また、$countや$indexなどの変数を使用することで、アイテム数やインデックスなどを取得しループ内で使用することもできます。

その他のものに関しては、ドキュメントを参照してください。

<ul>
  @for (user of users; track user.id; let cnt = $count, idx = $index) {
      <li>{{idx + 1}}/{{cnt}}: {{user.name}}</li>
  }
  @empty {
      <li>ユーザーが存在しません。</li>
  }
</ul>

@switch

*ngSwitchを使用した場合

<ng-container [ngSwitch]="value">
  <p *ngSwitchCase="'a'">値はaです。</p>
  <p *ngSwitchCase="'b'">値はbです。</p>
  <p *ngSwitchCase="'c'">値はcです。</p>
  <p *ngSwitchDefault>値はa、b、c以外です。</p>
</ng-container>

@switchを使用した場合

@switch (value) {
  @case ('a') {
    <p>値はaです。</p>
  }
  @case ('b') {
    <p>値はbです。</p>
  }
  @case ('c') {
    <p>値はcです。</p>
  }
  @default {
    <p>値はa、b、c以外です。</p>
  }
}

まとめ

従来のディレクティブを使用する方法と比べ、HTMLタグの中に条件などを記載することなく書けること、また複数の要素をまとめる必要がある場合にng-containerを使用する必要がなくなることを考えると、コード可読性が上がってくれるのではないかと期待しています。

参考リンク

• Control flow • Angular