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

Блокту которуучу баскычты жасаңыз: эгер ал жашырылса көрсөтсүн, эгер көрсөтүлүп жатса жашырсын.