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

Компоненттин шаблонунда див жасап, ага компоненттин класстын active касиетине жараша күйгүзүлүп же өчүрүлүп турган CSS классты hidden кошобуз:

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

Ошондой эле баскыч жасайбыз, ага басканда toggle методу чакырылып, биздин компонент көрүнүп же жашырылат:

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

Үч блок берилди. Ар бири өз блогун күйгүзүп-өчүрүп турган үч баскыч жасаңыз.