Directiva if în Angular

În Angular, puteți face ca o etichetă să fie afișată sau ascunsă în funcție de valoarea unei variabile. Pentru aceasta se aplică directiva specială *ngIf. Să vedem cum să lucrăm cu ea.

Pentru început, această directivă trebuie importată:

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

Și adăugați-o în secțiunea de importuri din decorator:

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

Să presupunem că acum avem următoarea variabilă:

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

Să facem un div care va fi afișat, dacă această variabilă are valoarea true:

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

Și acum să facem ca div-ul să fie afișat, dacă variabila noastră are valoarea false:

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