Angularの@switchを複数の条件を簡潔に管理する

テンプレート構文の@switchとは

Angular 18で導入された@switchは、テンプレート内で複数の条件を簡潔に表現するための便利な構文です。

複数の値の中で条件にマッチするものを簡単に選択して表示することができます。

基本構文

以下が@switchの基本的な使い方です。

<div>
    @switch (status) {
      @case ('loading') {
        <p>読み込み中...</p>
      }
      @case ('success') {
        <p>データが正常に読み込まれました！</p>
      }
      @case ('error') {
        <p>エラーが発生しました。</p>
      }
      @default {
        <p>ステータスが不明です。</p>
      }
    }
</div>

@switchを使用すると、statusの値に応じて@caseブロック内のテンプレートが表示されます。もし、いずれの@caseにも該当しない場合は、@defaultブロックが実行されます。

また、他のプログラミング言語等だと、break文を書かないと複数マッチする動きがありますが、Angularの@switchの場合は、先頭で1つ一致したら、後続の条件分岐の処理は行いません。

まとめ

Angular 18の@switchは、複数の条件をシンプルに管理するための強力な機能です。直感的で可読性の高いコードを記述できるため、状態管理やUIの切り替えなど、様々なシナリオで活躍します。