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

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

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

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

言い換えれば、テンプレートのHTMLを動的に表示することができるのです！

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

本記事のAngularのバージョン

バージョン　Angular CLI: 16.1.5

準備

コンポーネント生成

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

$ ng g c ngif

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

以下のコードは、ボタンを押すことで、テキストを表示、非表示を切り替えます。

ngif.component.ts

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

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

export class NgifComponent {
  flag = false;
  
  onClick() {
    this.flag = !this.flag;
  }
}

10行目でboolean型の変数flagをfalseで初期化しています。

12行目で、onClick関数を実行するとflagを反転させます。

今回は、HTMLのbuttonタグにつけて、クリックすることでflagのTrue,Falseを変えていきたいと思います。

app.component.html

<app-neif></app-ngif>

例1：ngIf

ngIfディレクティブの書き方は以下の通り。

<div *ngIf="条件式">条件式がTrueの時のテンプレート</div>

具体例

ngif.component.html

<div *ngIf="flag">
    <p>flagがTrue</p>
</div>
<input type="submit" (click)="onClick()">

１行目でboolean型の変数flagがtrueなら2行目が表示されます。

また、flagがfalseなら表示されません。

例２：ngIf else

書き方は以下の通り。

<div *ngIf="条件式; else テンプレート名">条件式がTrueの時のテンプレート</div>
<ng-template #テンプレート名>条件式がFalseの時のテンプレート</ng-template>

具体例

ngif.component.html

<div *ngIf="flag; else falseFlag">
    <p>flagがTrue</p>
</div>
<ng-template #falseFlag>
   <p>flagがFalse</p>
</ng-template>
<input type="submit" (click)="onClick()">

ngIfの条件式の中にelseを用いることで、その条件に合わなかった場合も定義することができます。

2行目は、flagがTrueの時に表示されます。

5行目は、flagがFalseの時に表示されます。

４行目で、1行目でelseのあとに記述したテンプレート名をng-templateタグに続けて#テンプレート名とすることでngIfの条件に合わなかった場合のテンプレートを定義できます。

例３：ngif then else

書き方は以下の通り。

<div *ngIf="条件式; then テンプレート名1; else テンプレート名2"></div>
<ng-template #テンプレート名1>条件式がTrueの時のテンプレート</ng-template>
<ng-template #テンプレート名2>条件式がFalseの時のテンプレート</ng-template>

具体例

ngif.component.ts

<div *ngIf="flag; then trueFlag; else falseFlag"></div>
<ng-template #trueFlag>
   <p>flagがTrue</p>
</ng-template>
<ng-template #falseFlag>
   <p>flagがFalse</p>
</ng-template>
<input type="submit" (click)="onClick()">

ngifの条件式の中にthen elseを入れることでTrueの時、Falseの時のテンプレートを定義できます。

2~4行目が、flagがTrueの時のテンプレート

<ng-template #trueFlag>
   <p>flagがTrue</p>
</ng-template>

5~7行目が、flagがFalseの時のテンプレート

<ng-template #falseFlag>
   <p>flagがFalse</p>
</ng-template>

まとめ

ngIfディレクティブの書き方は、以上3通りあります。

ngIf
ngIf else
ngIf then else

ちなみにngIfディレクティブはelse ifに該当するものはありません。