Реактивность условий в Angular

Реактивность также будет работать с условиями ngIf. Это значит, что мы можем показывать или скрывать блок в зависимости от того, что содержится в свойстве класса.

Давайте попробуем на практике. Пусть у нас есть следующий блок

<div> text </div>

Давайте будем показывать или скрывать его по условию:

<div *ngIf="isShow"> text </div>

Сделаем теперь две кнопки. По клику на первую будем показывать наш блок, а по клику на вторую - скрывать:

<button (click)="show()"> show </button> <button (click)="hide()"> hide </button>

Добавим в класс компонента свойство которое будет регулировать то, показан ли блок или нет:

export class AppComponent { public isShow: boolean = true; }

А теперь напишем реализацию наших методов для показа и скрытия блока:

export class AppComponent { public isShow: boolean = true; public show(): void { this.isShow = true; } public hide(): void { this.isShow = false; } }

Сделайте кнопку, нажатие по которой будет тоглить блок: показывать, если он скрыт, и скрывать, если он показан.