【Angular】ngSwitchで条件分岐しよう

本記事では、フレームワークAngularで用いられるngSwitchディレクティブについて紹介します。

ディレクティブという難しい言葉が出てきましたが、要は、ngSwitchというものは、

HTMLで条件によって表示を切り替えることができるものです。

次に実際にコードを見て、どのようにngSwitchディレクティブを扱うか見ていきましょう。

本記事のAngularのバージョン

バージョン　Angular CLI: 16.1.5

準備

コンポーネント生成

Angularのワークスペースで新しくコンポーネントを用意します。

$ ng g c ngSwitch

ngSwitchは、好みのコンポーネント名に変えていただいてよいです。

以下のコードは、プルダウンから言語を選択し、その言語のあいさつを表示します。

ngSwitch.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-switch',
  templateUrl: './ng-switch.component.html',
  styleUrls: ['./ng-switch.component.css']
})

export class NgSwitchComponent {
  greeting:string = 'notSelected';
}

app.component.html

<app-ng-switch></app-ng-switch>

app.module.ts

今回は、FormsModule を使用するので、インポートします。

// 省略
import { FormsModule } from '@angular/forms';　// 追加

@NgModule({
  declarations: [
　　// 省略
  ],
  imports: [
    // 省略
    FormsModule,　//追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

サンプルコード

ngSwitchディレクティブの書き方は、以下の通りです。

<div [ngSwitch]='変数名'>
    <div *ngSwitchCase='値1'>その値1での表示内容</div>
    <div *ngSwitchCase='値2'>その値2での表示内容</div>
    ....
    <div *ngSwitchDefault >ngSwitchCaseの値ではなかったときの表示内容</div>
</div>

プログラミングのswitch文を知っていれば、理解しやすいですね。

参考：JavaScriptのSwitch文

switch (変数名){
  case 値1:
    値１での処理
    break;
  case 値２:
    値２での処理
    break;
  default:
    いずれの値とも一致しないときに実行する処理
}

ngSwitch.component.html

<form>
    <label>世界のあいさつ</label>
    <select name='greeting' [(ngModel)]="greeting">
      <option value="English">英語</option>
      <option value="Japanese">日本語</option>
      <option value="Chinese">中国語</option>
    </select>
  
    <div [ngSwitch]="greeting">
      <span *ngSwitchCase="'English'">Hello</span>
      <span *ngSwitchCase="'Japanese'">こんにちは</span>
      <span *ngSwitchCase="'Chinese'">nǐ hǎo</span>
      <span *ngSwitchDefault>言語を選択してください</span>
    </div>
</form>

これで、プルダウンで選択すると、その言語のあいさつが表示されます。