従来
Angularでは状況に応じてHTMLの内容を変更する際に以下のディレクティブを使用します。
- *ngIf
- *ngSwitch, *ngSwitchCase, *ngSwitchDefault
- *ngFor
これらのディレクティブは以下のタグと組み合わせて使用することもあります。
- ng-container
- ng-content
- ng-template
使い方を説明した記事はネット上に既にたくさんあるので詳細は説明しませんが、以下のような感じになります。
<div *nfIf="isProcessing; then processingMess; else doneMess"></div>
<ng-template #processingMess>
<span>処理中...</span>
</ng-template>
<ng-template #doneMess>
<span>完了!</span>
</ng-template>
<div [ngSwitch]="processState">
<span *ngSwitchCase="PREPARING">準備中.</span>
<span *ngSwitchCase="PROCESSING">処理中...</span>
<span *ngSwitchCase="DONE">完了!</span>
<span *ngSwitchDefault> (?o?) </span>
</div><table>
<tr *ngFor="let item of itemList">
<td>{{item}}</td>
</tr>
</table>ngSwitchやngForの例はまだ何とかわかりますが、ngIfのようにng-templateなどとの組み合わせになると直感的でなくて、わかりにくいと大変不評です。
Angular17以降
Angular17で、以下の新しい構文が追加されました。
- @if, @else, @else if
- @switch, @case, @default
- @for, @empty
これらは直感的に書けるように改善されています。
<span>
@if (isProcessing) {
処理中...
} @else {
完了!
}
</span>
<span>
@switch (processState) {
@case ("PREPARING") {準備中.}
@case ("PROCESSING") {処理中...}
@case ("DONE") {完了!}
@default { (?o?) }
}
</span>
<table>
@for (item of itemList; track item) {
<tr>
<td>{{item}}</td>
</tr>
}
@empty {
<tr>
<td>空っぽです</td>
</tr>
}
</table>
@emptyに対応する*ng～ディレクティブはなさそうです。探してみたのですが見つかりません。
一度使ってしまうと、もう*ng～ディレクティブには戻れません。
