Angular TIPS

Angular TIPS

条件式の真偽に応じて出力を切り替えるには?(ngIf/else)

2017年11月27日

与えられた条件式に基づき要素の表示/非表示を切り替えるngIfディレクティブで用いる、「さもなければ」を意味するelse句と、テンプレートとして別出しするためのthen句の、基本的な使い方を説明する。

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

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

 Angular 2のngIfディレクティブは、条件式が偽の場合の表示を表現できませんでした。よって、もしも真偽それぞれの出力を規定したい場合には、ngIfディレクティブを列記するか、ngSwitchディレクティブ(後日別稿で解説の予定です)を利用しなければなりませんでした。

 しかし、Angular 4以降ではngIfディレクティブにelse句が追加されており、「●○ならば……を、さもなくば……を表示」という表現が可能になっています。例えば以下は、別稿「TIPS:条件式に応じて要素を表示/非表示にするに?」で扱ったサンプルを基に、非表示状態のときには「非表示中」というメッセージを表示するように修正した例です*1

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

@Component({
  selector: 'app-root',
  template: `
    <form>
      <label for="switch">表示:</label>
      <input id="switch" name="switch" type="checkbox"
        [(ngModel)]="show" />
      <hr />
      <!--1showプロパティがtrueならパネルを表示、さもなければhideContentテンプレートを表示-->
      <div id="panel" *ngIf="show; else hideContent"
        style="border:solid 1px #000; width: 400px; padding: 10px;">
      あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ
      </div>
      <ng-template #hideContent>
        <h3 style="color:#F0F">非表示状態です。</h3>
      </ng-template>
    </form>
  `,
})
export class AppComponent  { 
  show = false;
}
条件式がfalseの場合にもメッセージを表示するコード(app.component.ts)
<code>show</code>プロパティがfalseの場合にもメッセージを表示
showプロパティがfalseの場合にもメッセージを表示

 elseを利用する場合の条件式は、以下のように表します。

[構文]else句(ngIfディレクティブの条件式)

条件式; else テンプレートの名前

 例えば1の例であれば、「*ngIf="show; else hideContent" ……」となっています。これは「showプロパティがtrueであれば配下のコンテンツを、さもなければhideContentテンプレートを表示しなさい」という意味になります。テンプレートを定義するのは、<ng-template>要素の役割です。テンプレートの名前は#名前の形式で宣言します。

 これでサンプルを実行すると、チェックボックスがオン(=showプロパティがtrue)の場合に配下のコンテンツが表示されるのはもちろん、オフの場合にhideContentテンプレートで定義されたコンテンツが表示されることを確認してください。

全てのコンテンツをテンプレート化

 else句だけでなく、条件式がtrueの場合に表示すべきコンテンツもテンプレートとして別出しが可能です。これには、then句を利用してください。以下は、上の例をthen句を利用して書き換えたものです。

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

@Component({
  selector: 'app-root',
  template: `
    <form>
      <label for="switch">表示:</label>
      <input id="switch" name="switch" type="checkbox"
        [(ngModel)]="show" />
      <hr />
      <div id="panel" *ngIf="show; then showContent; else hideContent">
      </div>
      <ng-template #showContent>
        <div style="border:solid 1px #000; width: 400px; padding: 10px;">
      あいうえおかきくけこさしすせそ...
        </div>
      </ng-template>
      <ng-template #hideContent>
        <h3 style="color:#F0F">非表示状態です。</h3>
      </ng-template>
    </form>
  `,
})
export class AppComponent  { 
  show = false;
}
条件式がtrueの場合とfalseの場合のコンテンツ、両方をテンプレートとして別出ししたコード(app.component.ts)

 これで「showプロパティがtrueの場合はshowContentテンプレートを、さもなければhideContentテンプレートを表示しなさい」という意味になります。

 なお、then句を指定した場合には、ngIfディレクティブ配下のコンテンツは条件式の真偽にかかわらず、無視される点に注意してください。

処理対象:構造ディレクティブ(Structural directives) カテゴリ:基本
処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
処理対象:NgIf カテゴリ:テンプレート構文(Template Syntax) > ビルトイン構造ディレクティブ(Built-in structural directives)
API:NgIf(*ngIf/then/else) カテゴリ:@angular > common > DIRECTIVE(ディレクティブ)
処理対象:<ng-template> カテゴリ:構造ディレクティブ(Structural directives)

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

29. 複数の要素を繰り返し出力するには?(ngFor)

配列の内容を順に出力できるngForディレクティブ(=ngForOfディレクティブ)と、ダミーのコンテナー要素(<ng-container>)を使うことで、複数の要素群をまとめて繰り返し出力する方法を説明する。

30. 条件式に応じて要素を表示/非表示にするには?(ngIf)

与えられた条件式に基づき要素の表示/非表示を切り替えるngIfディレクティブの基本的な使い方を説明。また、ngIfディレクティブによる表示/非表示の挙動の特性と注意点も示す。

31. 【現在、表示中】≫ 条件式の真偽に応じて出力を切り替えるには?(ngIf/else)

与えられた条件式に基づき要素の表示/非表示を切り替えるngIfディレクティブで用いる、「さもなければ」を意味するelse句と、テンプレートとして別出しするためのthen句の、基本的な使い方を説明する。

32. 数値(単数/複数)によって表示を切り替えるには?(ngPlural)

Angularで数値によってテキスト表示内容を切り替えるための、ngPluralディレクティブの基本的な使い方を説明する。

33. 複数のスタイルクラスをまとめて操作するには?(ngClass)

スタイルシートとして定義した複数の対象クラスのスタイルを、任意の要素のclass属性にまとめて着脱できるngClassディレクティブの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!