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

Կոմպոնենտի թեմպլեյտում ստեղծենք div, և ավելացնենք դրան CSS hidden կլաս, որ կմիանա կամ կանջատվի՝ կախված active հատկությունից կոմպոնենտի կլասում.

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

Ստեղծենք նաև կոճակ, որի սեղմումով կկանչվի toggle մեթոդը, ցուցադրելով կամ թաքցնելով մեր կոմպոնենտը.

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

Տրված են երեք բլոկ: Ստեղծեք երեք կոճակ, յուրաքանչյուրը որոնցից կթոգղլի իր բլոկը: