Рэактыўнасць умоў у Angular

Рэактыўнасць таксама будзе працаваць з умовамі ngIf. Гэта значыць, што мы можам паказваць альбо хаваць блок у залежнасці ад таго, што змяшчаецца ў уласцівасці класа.

Давайце паспрабуем на практыцы. Хай у нас ёсць наступны блок

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

Давайце будзем паказваць альбо хаваць яго па ўмове:

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

Зробім цяпер дзве кнопкі. Па кліку на першую будзем паказваць наш блок, а па кліку на другую - хаваць:

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

Дадамо ў клас кампанента ўласцівасць якое будзе рэгуляваць тое, паказаны лі блок альбо не:

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

А цяпер напішам рэалізацыю нашых метадаў для паказу і схавання блока:

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