If-direktiivi Angularissa

Angularissa voidaan tehdä niin, että tagi näytetään tai piilotetaan riippuen muuttujan arvosta. Tätä varten käytetään erityistä direktiiviä *ngIf. Katsotaan, kuinka sen kanssa työskennellään.

Aluksi tämä direktiivi on tuotava:

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

Ja lisättävä se importtien osaan dekoratorissa:

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

Olkoon meillä nyt seuraava muuttuja:

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

Tehdään div, joka näytetään, jos tämä muuttuja on arvoltaan true:

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

Tehdään nyt niin, että div näytetään, jos muuttujamme on arvoltaan false:

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