← Angular コース
8. @switch — 値ごとに表示を分ける
1つの値が取りうる複数のパターンで表示を分けるには @switch を使います。@switch (値) { @case (候補) { ... } } と書くと、値に一致した @case の中身だけが描画されます。どの @case にも一致しなかったときの表示は @default { ... } に書きます。
実務では、契約プラン・注文ステータス・ユーザー権限のように「決まった種類のどれか」を持つデータの表示分けにぴったりです。同じ値への分岐を @if と @else if で連ねるより、@switch のほうが「この値で分岐している」という意図が一目で伝わります。
JavaScriptのswitch文と違い、break は不要で、複数の @case に同時に一致することもありません。一致判定は === で行われるため、文字列と数値の型の違いには注意しましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
@Component({
selector: 'app-plan-badge',
// plan の値に一致する @case だけが描画される
template:
'@switch (plan) {' +
' @case ("free") { <span>無料プラン</span> }' +
' @case ("pro") { <span>Proプラン</span> }' +
' @default { <span>不明なプラン</span> }' +
'}',
})
export class PlanBadgeComponent {
plan = 'pro';
}