Tingimuste reaktiivsus Angularis

Reaktiivsus töötab ka tingimustega ngIf. See tähendab, et me saame kuvada või peita plokki sõltuvalt klassi omaduses olevast väärtusest.

Proovime seda praktiliselt. Oletame, et meil on järgmine plokk

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

Kuvame või peidame selle tingimuse alusel:

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

Teeme nüüd kaks nuppu. Esimesele klõpsates kuvame oma ploki ja teisele klõpsates - peidame:

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

Lisame komponendi klassi omaduse, mis reguleerib, kas plokk on nähtav või mitte:

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

Ja nüüd kirjutame meie ploki kuvamise ja peitmise meetodite rakendused:

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