Angularのifディレクティブ

Angularでは、変数の値に応じてタグを表示したり非表示にしたりすることができます。このために、特別なディレクティブ *ngIf が使われます。その使い方を見てみましょう。

まず、このディレクティブをインポートする必要があります：

import {NgIf} from "@angular/common";

そして、デコレーターのimportsセクションに追加します：

@Component({
	.....
	imports: [....., NgIf],
	....
})

ここで、次のような変数があるとします：

export class AppComponent {
	public isAdmin: boolean = true;
}

この変数の値が true の場合に表示されるdivを作りましょう：

<div *ngIf="isAdmin">
	text
</div>

次に、変数の値が false の場合にdivが表示されるようにしましょう：

<div *ngIf="!isAdmin">
	text
</div>

isAdult プロパティを作成してください。変数に true の値が設定されている場合、成人向けのテキストを表示します。