ある条件が成り立っている場合にのみ表示される HTML要素が作りたいときは、<code>*ngIf</code>を使う。
コンポーネントのスニペット:
<pre>
...
</pre>
テンプレートのスニペット:
<pre>
...
this.flag が true のときのみ表示
</div>
<div *ngIf="!flag">
this.flag が false のときのみ表示
</div>
</pre>
さらに、条件が成り立っているときと成り立っていないときに、表示されるHTML要素を切り替えることもできる。条件が相互に排他的な場合は容易に複数分岐が可能だが、switch文やif-else-if-else...のような多分岐を記述するのは簡単でない。そのために、<code>*ngIf</code>には<code>else</code>を記述する方法が用意されている。 コンポーネントのスニペット:<pre>...export class XxxComponent implements OnInit { data: string; // この値によって、表示するHTMLを切り替える。 ...}</pre> テンプレートのスニペット:<pre>...<div *ngIf="data=='A'; else ELSE_1"> this.data が A のときのみ表示 </div><ng-template #ELSE_1> <div *ngIf="data=='B'; else ELSE_2"> this.data が B の時のみ表示 </div></ng-template><ng-template #ELSE_2> <div *ngIf="data=='C'; else ELSE_3"> this.data が C の時のみ表示 </div></ng-template><ng-template #ELSE_3> <div> this.data が A, B, C 以外の時のみ表示 </div></ng-template></pre>
=== 繰り返し要素 ===
