Dyrektywa if w Angular

W Angular można sprawić, aby znacznik był pokazywany lub ukrywany w zależności od wartości zmiennej. Służy do tego specjalna dyrektywa *ngIf. Spójrzmy, jak z nią pracować.

Na początku tę dyrektywę trzeba zaimportować:

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

I dodać ją w sekcji importów w dekoratorze:

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

Załóżmy teraz, że mamy następującą zmienną:

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

Zróbmy div, który będzie pokazany, jeśli ta zmienna ma wartość true:

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

A teraz zróbmy tak, aby div był pokazany, jeśli nasza zmienna ma wartość false:

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