Direktiva if u Angularu

U Angularu je moguće postići da se HTML tag prikazuje ili skriva u zavisnosti od vrednosti promenljive. Za to se koristi posebna direktiva *ngIf. Hajde da pogledamo kako se radi sa njom.

Za početak, ovu direktivu je potrebno importovati:

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

I dodati je u imports deo dekoratora:

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

Pretpostavimo sada da imamo sledeću promenljivu:

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

Hajde da napravimo div koji će biti prikazan ako ova promenljiva ima vrednost true:

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

A sada hajde da napravimo da div bude prikazan ako naša promenljiva ima vrednost false:

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