Reaktivität von Bedingungen in Angular

Reaktivität funktioniert auch mit ngIf-Bedingungen. Das bedeutet, dass wir einen Block anzeigen oder ausblenden können, abhängig davon, was in der Klassen-Eigenschaft enthalten ist.

Lasst es uns praktisch ausprobieren. Angenommen, wir haben den folgenden Block

app/app.component.html<div>
  text
</div>

Lasst uns ihn anzeigen oder ausblenden basierend auf einer Bedingung:

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

Erstellen wir nun zwei Buttons. Beim Klick auf den ersten wird unser Block angezeigt, und beim Klick auf den zweiten - ausgeblendet:

app/app.component.html<button (click)="show()">
  show
</button>
<button (click)="hide()">
  hide
</button>

Fügen wir der Komponentenklasse eine Eigenschaft hinzu, die reguliert, ob der Block angezeigt wird oder nicht:

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

Und nun schreiben wir die Implementierung unserer Methoden zum Anzeigen und Ausblenden des Blocks:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}