Reaktivnost pogojev v Angular

Reaktivnost bo delovala tudi s pogoji ngIf. To pomeni, da lahko prikažemo ali skrijemo blok, odvisno od tega, kaj vsebuje lastnost razreda.

Poskusimo v praksi. Naj imamo naslednji blok

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

Prikazujmo ali skrivajmo ga glede na pogoj:

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

Naredimo zdaj dva gumba. Ob kliku na prvega bomo prikazali naš blok, ob kliku na drugega pa skrili:

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

Dodajmo v razred komponente lastnost, ki bo uravnavala, ali je blok prikazan ali ne:

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

In zdaj napišimo implementacijo naših metod za prikaz in skrivanje bloka:

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