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;
	}
}

Блокни олгин-бергин қиладиган тугма яратинг: агар яширилган бўлса, кўрсатилсин, агар кўрсатилган бўлса, яширилсин.