Рэактыўнасць умоў у 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;
	}
}

Зрабіце кнопку, націсканне па якой будзе пераключаць блок: паказваць, калі ён схаваны, і хаваць, калі ён паказаны.