Sąlygų reaktyvumas Angular

Reaktyvumas taip pat veiks su sąlygomis ngIf. Tai reiškia, kad galime rodyti arba paslėpti bloką priklausomai nuo to, kas yra klasės savybėje.

Pabandykime praktiškai. Tarkime, kad turime šį bloką

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

Leiskite jį rodyti arba slėpti pagal sąlygą:

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

Dabar sukurkime du mygtukus. Paspaudus pirmąjį rodysime mūsų bloką, o paspaudus antrajį - paslėpsime:

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

Pridėkime į komponento klasę savybę, kuri reguliuos, ar blokas yra rodomas, ar ne:

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

O dabar parašykime mūsų metodų implementaciją bloko rodymui ir slėpimui:

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