Die Direktive if in Angular

In Angular kann man es so einrichten, dass ein Tag angezeigt oder ausgeblendet wird, abhängig vom Wert einer Variable. Dafür wird die spezielle Direktive *ngIf verwendet. Lassen Sie uns ansehen, wie man mit ihr arbeitet.

Zunächst muss diese Direktive importiert werden:

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

Und sie im Import-Bereich des Dekorators hinzugefügt werden:

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

Nehmen wir nun an, wir haben die folgende Variable:

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

Lassen Sie uns ein Div erstellen, das angezeigt wird, wenn diese Variable den Wert true hat:

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

Und jetzt sorgen wir dafür, dass das Div angezeigt wird, wenn unsere Variable den Wert false hat:

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