ngIf-direktivet i Angular

I Angular kan du gøre det således, at et tag bliver vist eller skjult afhængigt af værdien af en variabel. For at gøre dette anvendes den specielle directive *ngIf. Lad os se, hvordan man arbejder med den.

Til at starte med skal denne directive importeres:

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

Og tilføje den i imports-sektionen i dekorationen:

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

Lad os nu antage, at vi har følgende variabel:

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

Lad os lave en div, som vil blive vist, hvis denne variabel har værdien true:

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

Og lad os nu gøre sådan, at div'en vises, hvis vores variabel har værdien false:

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