Az if direktíva az Angularban

Az Angularban lehetőség van arra, hogy egy tag attól függően jelenjen meg vagy rejtőzzön el, hogy egy változó milyen értéket tartalmaz. Ehhez a *ngIf speciális direktívát használjuk. Nézzük meg, hogyan kell vele dolgozni.

Először is importálni kell ezt a direktívát:

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

És hozzá kell adni az importok részéhez a dekorátorban:

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

Tegyük fel, hogy a következő változónk van:

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

Készítsünk egy div-et, amely akkor jelenik meg, ha ez a változó true értéket tartalmaz:

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

Most pedig tegyük úgy, hogy a div akkor jelenjen meg, ha a változónk false értéket tartalmaz:

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