Реактивность условий в 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;
  }
}