Direktiva if v Angularju

V Angularju lahko naredite, da se oznaka prikaže ali skrije, odvisno od vrednosti spremenljivke. Za to se uporablja posebna direktiva *ngIf. Poglejmo, kako se z njo dela.

Za začetek je to direktivo potrebno uvoziti:

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

In jo dodajte v razdelek uvozov v dekoratorju:

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

Naj imamo zdaj naslednjo spremenljivko:

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

Naredimo div, ki bo prikazan, če ima ta spremenljivka vrednost true:

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

In zdaj naredimo tako, da je div prikazan, če ima naša spremenljivka vrednost false:

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