if-directive in Angular

In Angular kan je ervoor zorgen dat een tag wordt getoond of verborgen afhankelijk van de waarde van een variabele. Hiervoor wordt de speciale directive *ngIf gebruikt. Laten we bekijken hoe je ermee werkt.

Om te beginnen moet deze directive worden geïmporteerd:

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

En voeg deze toe aan de imports-sectie in de decorator:

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

Stel dat we nu de volgende variabele hebben:

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

Laten we een div maken die wordt getoond, als deze variabele de waarde true heeft:

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

En laten we het nu zo maken dat de div wordt getoond, als onze variabele de waarde false heeft:

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