Reaktywność warunków w Angularze

Reaktywność będzie również działać z warunkami ngIf. Oznacza to, że możemy wyświetlać lub ukrywać blok w zależności od tego, co zawiera właściwość klasy.

Spróbujmy w praktyce. Załóżmy, że mamy następujący blok

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

Wyświetlajmy lub ukrywajmy go warunkowo:

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

Stwórzmy teraz dwa przyciski. Kliknięcie pierwszego ma pokazywać nasz blok, a kliknięcie drugiego - ukrywać:

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

Dodajmy do klasy komponentu właściwość, która będzie regulować, czy blok jest pokazany, czy nie:

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

A teraz napiszmy implementację naszych metod do pokazywania i ukrywania bloku:

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