Angular-тағы шарттардың реактивтілігі

Реактивтілік сонымен қатар шарттармен де жұмыс істейді ngIf. Бұл біздің класс қасиетінде не бар екеніне байланысты блокты көрсетуімізге немесе жасыруымызға болатынын білдіреді.

Тәжірибеде көрейік. Бізде келесі блок бар болсын

<div>
	текст
</div>

Оны шарт бойынша көрсетейік немесе жасырайық:

<div *ngIf="isShow">
	текст
</div>

Енді екі түйме жасайық. Біріншісін басу арқылы біздің блокты көрсетейік, ал екіншісін басу арқылы - жасырайық:

<button (click)="show()">
	көрсету
</button>
<button (click)="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;
	}
}

Блокты ауыстыратын түйме жасаңыз: ол жасырын болса көрсетсін, көрсетілген болса жасырсын.