Direktivet if i Angular

I Angular kan man göra så att en tagg visas eller döljs beroende på värdet av en variabel. För detta används ett speciellt direktiv *ngIf. Låt oss se hur man arbetar med det.

Först måste detta direktiv importeras:

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

Och lägg till det i imports-avsnittet i dekoratören:

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

Låt oss nu anta att vi har följande variabel:

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

Låt oss skapa en div som kommer att visas om denna variabel har värdet true:

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

Och nu låt oss göra så att div:en visas om vår variabel har värdet false:

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