Angular-да стильдерді динамикалық өзгерту

ngClass және ngStyle директивалары арқылы элементтерге өрнектерді байлауға болады, бұл біздің стильдеріміздің динамикалық түрде өзгеруіне мүмкіндік береді.

Мәтн компоненттің active сипаты арқылы жасырылатын немесе көрсетілетін етейік:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Ол үшін toggle функциясын жазамыз, ол бұл сипатты кезекпе-кезек қосады немесе өшіреді:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Компоненттің CSS файлында келесі стильді класқа тағайындаймыз:

.hidden {
	display: none;
}

Компоненттің шаблонында див жасаймыз және оған CSS класы hidden қосамыз, ол компонент класының active сипатына байланысты қосылады немесе өшеді:

<div [ngClass]="{hidden: active}">
	text
</div>

Сондай-ақ батырма жасаймыз, оны басқанда toggle әдісі шақырылып, біздің компонентті көрсетеді немесе жасырады:

<button (click)="toggle()">
	toggle
</button>

Үш блок берілген. Әрқайсысы өз блогын көрсетіп-жасыратын үш батырма жасаңыз.