Директива 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;
}

Нека направим div, който ще се покаже, ако тази променлива има стойност true:

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

А сега нека направим така, че div да се покаже, ако нашата променлива има стойност false:

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