if-direktivet i Angular

I Angular kan du gjøre det slik at en tag blir vist eller skjult avhengig av verdien til en variabel. For dette brukes det spesialdirektivet *ngIf. La oss se hvordan man arbeider med det.

Først må dette direktivet importeres:

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

Og legg det til i imports-seksjonen i dekoratøren:

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

La oss nå anta at vi har følgende variabel:

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

La oss lage en div som vil bli vist, hvis denne variabelen har verdien true:

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

Og la oss nå gjøre det slik at div-en vises, hvis variabelen vår har verdien false:

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