Директива if в Angular

В Angular можно сделать так, чтобы тег показывался или скрывался в зависимости от значения переменной. Для этого применяется специальная директива *ngIf. Давайте посмотрим, как с ней работать.

Для начала эту директиву нужно импортировать:

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

И добавить ее в раздел импортов в декораторе:

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

Пусть теперь у нас есть следующая переменная:

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

Давайте сделаем див, который будет показан, если эта переменная имеет значение true:

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

А теперь сделаем так, чтобы див был показан, если наша переменная имеет значение false:

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

Сделайте свойство isAdult. Покажите текст для взрослых, если в нашей переменной лежит значение true.