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

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