Reaktivita podmienok v Angular

Reaktivita bude fungovať aj s podmienkami ngIf. To znamená, že môžeme zobrazovať alebo skrývať blok v závislosti od toho, čo je obsiahnuté vo vlastnosti triedy.

Vyskúšajme si to v praxi. Nech máme nasledujúci blok

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

Zobrazujme alebo skrývajme ho podľa podmienky:

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

Vytvorme teraz dva tlačidlá. Kliknutím na prvé zobrazíme náš blok a kliknutím na druhé - skryjeme:

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

Pridajme do triedy komponentu vlastnosť, ktorá bude regulovať to, či je blok zobrazený alebo nie:

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

A teraz napíšme implementáciu našich metód pre zobrazenie a skrytie bloku:

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