Директива ngif

Предназначен для обработки условий. На примере ниже показано применение для установки видимости компонента.

...
loggedIn: boolean = true; // (1)
...

<div *ngIf="loggedIn"> (2)
  <p>Logged in.</p>
</div> 

Объявляем переменную в классе компонента (1). В разметке объявляем директиву ngIf присваиваем ей значение переменной (2).

Как и любой логический оператор, ngIf может использовать отрицание (3).

<div *ngIf="!loggedIn"> (3)
  <p>Logged in.</p>
</div> 

Применение условия else

<div *ngIf="loggedIn; else loggedOut"> (4)
  <p>Logged in.</p>
</div>
<ng-template #loggedOut> (5)
  Login please
</ng-template> 

Добавляется условие else и указывается локальная переменная (4), которая в свою очередь указывает на шаблон ng-template (5). При условии если переменная loggedIn = false, то содержимое ng-template будет выведено на странице.

Применение условия then

<ng-container *ngIf="loggedIn; then loggedIn; else loggedOut">

</ng-container>

<ng-template #loggedIn>
  Logged in
</ng-template>

<ng-template #loggedOut>
  Login please
</ng-template>