Direttiva if in Angular

In Angular è possibile fare in modo che un tag venga mostrato o nascosto in base al valore di una variabile. A questo scopo si utilizza la direttiva speciale *ngIf. Vediamo come funziona.

Per prima cosa, questa direttiva deve essere importata:

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

E aggiungerla alla sezione delle importazioni nel decoratore:

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

Supponiamo ora di avere la seguente variabile:

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

Creiamo un div che verrà visualizzato se questa variabile ha valore true:

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

Ora facciamo in modo che il div venga visualizzato se la nostra variabile ha valore false:

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