Die if-direktief in Angular

In Angular kan 'n tag vertoon of versteek word afhangende van die waarde van 'n veranderlike. Hiervoor word die spesiale direktief *ngIf gebruik. Kom ons kyk hoe om daarmee te werk.

Eerstens moet hierdie direktief geïmporteer word:

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

En voeg dit by die invoerafdeling in die dekorator:

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

Gestel ons het nou die volgende veranderlike:

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

Kom ons maak 'n div wat vertoon sal word as hierdie veranderlike die waarde true het:

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

En nou maak ons so dat die div vertoon word as ons veranderlike die waarde false het:

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