毎回、AngularでngIf/elseを書くたびに書き方を忘れてググっているので書きました。
ngIf/elseとng-containerタグとng-templateタグを組み合わせて使う
ngIf/elseとng-containerタグとng-templateタグを組み合わせて使うことで、余計なタグを生成せずにDOMの表示を切り替えることができます。
ngIf-else構文
条件句の真偽値に応じて、表示するDOMを切り替えることができます。条件句が真の時はngIf
のタグを、条件句が偽のときはelse
で指定しているタグを表示します。
<ng-container>タグ
テンプレート上で使用しても何も表示されないタグです。*ngIf
や*ngFor
の構造化ディレクティブを付けて使用する事で余計なタグを生成せずに、表示するタグの切り替えや、ループを行うことができます。
<ng-container> <div>Hey!!!!</div> </ng-container>
上記の例では、<ng-container>
タグ自体はコメント化されるため表示されませんが、ラップしているdiv要素は表示されます。
*ngFor
を<ng-container>
上で使っている例
<ng-container *ngFor="let fraction of fractionList; let i = index"> <app-fraction-input [(fraction)]="fractionList[i]"></app-fraction-input> </ng-container>
<ng-template>タグ
デフォルトでは表示されずに、ラップしている要素ごとコメント化されるタグです。#
で名前をつけることができます。
<ng-template> <div>Hey!!!!!!</div> </ng-template>
上記の例では、<ng-template>
タグ自体も<ng-template>
タグにラップされているdiv要素も表示されません。
組み合わせて使った例
ngIf-else
構文により、条件句(memoId
)がtrueのときは<ng-container>
タグでラップされている要素が表示されます。また、条件句が偽の時にはelseで指定されているcreateLabel
ブロック(<ng-template>
タグ)の方が表示されます。
<!-- 条件が真の時には「Update」と表示される --> <ng-container *ngIf="memoId; else createLabel">Update</ng-container> <!-- 条件が偽の時には「Create」と表示される --> <ng-template #createLabel>Create</ng-template>
環境
- Angular CLI: 8.3.20
- Node: 12.13.1
- OS: darwin x64
- Angular: 8.2.14
参考サイト
コンポーネントにおけるObservableの購読 - Angular After Tutorial