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

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

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

app/app.component.tsimport {NgIf} from "@angular/common";

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

app/app.component.ts@Component({
  .....
  imports: [....., NgIf],
  ....
})

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

app/app.component.tsexport class AppComponent {
  public isAdmin: boolean = true;
}

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

app/app.component.html<div *ngIf="isAdmin">
  text
</div>

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

app/app.component.html<div *ngIf="!isAdmin">
  text
</div>