Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Angular TIPS

Angular TIPS

式の値によってメッセージを切り替えるには?(ngSwitch)

2018年3月5日

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 5以降。v5時点で執筆しました。

 ngSwitchディレクティブは、いわゆるJavaScriptのswitch命令に相当するディレクティブです。与えられた式の値によって、表示すべきメッセージを切り替えます。

 まずは具体的な例を見てみましょう。以下は、選択ボックスで指定された書名に応じて、対応する紹介文を表示する例です*1

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

@Component({
  selector: 'app-root',
  template: `
    <form>
      <!-- 2選択ボックスとtitleプロパティをひも付け-->
      <select name="title" [(ngModel)]="title">
      <option value="">書籍を選択</option>
      <option value="angular">Angularアプリケーションプログラミング</option>
      <option value="mysql">3ステップでしっかり学ぶ MySQL入門</option>
      <option value="csharp">独習C# 新版</option>
      <option value="core">速習 ASP.NET Core</option>
      </select>
    </form>
    <!-- 1titleプロパティに応じて、対応するテキストを表示-->
    <div [ngSwitch]="title">
      <span *ngSwitchCase="'angular'">定番JavaScriptフレームワーク……省略……</span>
      <span *ngSwitchCase="'mysql'">MySQL(データベース)初心者の……省略……</span>
      <span *ngSwitchCase="'csharp'">C#言語の独学に最適な教科書……省略……</span>
      <span *ngSwitchCase="'core'">サクッと学べる。ASP.NET Coreの……省略……</span>
      <span *ngSwitchDefault>選択してください</span>
    </div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '';
}
選択された値に応じてメッセージを切り替えるコード(app.component.ts)
「Angularアプリケーションプログラミング」を選択

「Angularアプリケーションプログラミング」を選択

「3ステップでしっかり学ぶ MySQL入門」

「3ステップでしっかり学ぶ MySQL入門」を選択

選択された書籍に応じて、その紹介文を表示

 ngSwitchディレクティブの構文は、以下の通りです。

[構文]ngSwitchディレクティブ

<element [ngSwitch]="expression">
  <element *ngSwitchCase="val1">……</element>
  <element *ngSwitchCase="val2">……</element>
  ……
  <element *ngSwitchDefault>……</element>
</element>

  • element: 任意の要素
  • expression:
    • val1、val2……:

 これで、式(expression)の値に合致するngSwitchCase属性を持つ要素が表示されます(複数の要素が合致した場合には、その要素全てが表示されます)。全てのngSwitchCase属性に合致する値がなかった場合には、ngSwitchDefault属性を持つ要素が出力されます。ngSwitchDefault属性は省略することも可能です。

 この例であれば、式(expression)としてtitleプロパティが指定されており(1)、titleプロパティは選択ボックスにひも付いているので(2)、結果、選択ボックスに応じてメッセージが切り替わります。

 ngIfディレクティブでも代替できますが、条件式を個別に書かなければならない分、コードは冗長になります。1つの式の値を基に分岐するのであれば、ngSwitchディレクティブを優先して利用すべきです。

処理対象:ディレクティブ(Directive) カテゴリ:基本
API:NgSwitch(ngSwitch)|NgSwitchCase(ngSwitchCase)|NgSwitchDefault(ngSwitchDefault) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第42回~第46回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Angular TIPS
42. 文字列によって表示を切り替えるには?(i18nSelect)

i18nSelectパイプを使って、文字列値によってテキスト表示内容を切り替える方法を説明する。

Angular TIPS
43. ページング処理を実装するには?(ngFor/slice)

ngForディレクティブとsliceパイプを使って、ページャー(=ページングのためのリンクリスト)を実装する方法を説明する。

Angular TIPS
44. 【現在、表示中】≫ 式の値によってメッセージを切り替えるには?(ngSwitch)

JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明する。

Angular TIPS
45. 自作のサービスを定義するには?(@Injectableデコレーター)

既存のコンポーネントからアプリ固有のロジックをサービスとして切り出すための基本的な方法を説明する。

Angular TIPS
46. サーバーサイドと非同期通信するには?(HttpClientサービス)

HttpClientサービスを使ってWeb APIと非同期通信するための基本的な方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!