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