Angular-da stilərin dinamik dəyişdirilməsi

ngClass və ngStyle direktivləri vasitəsilə ifadələri elementlərə bağlamaq olar, bunun sayəsində bizim stillərimiz dinamik olaraq dəyişəcək.

Gəlin elə edək ki, mətn komponentin active xassəsi vasitəsilə gizlənsin və ya göstərilsin:

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

Bunun üçün toggle funksiyasını yazaq, hansı ki, bu xassəni növbə ilə aktiv və ya deaktiv edəcək:

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

Komponentin CSS faylında aşağıdakı stili klasa təyin edirik:

.hidden {
	display: none;
}

Komponentin şablonunda bir div edək və ona CSS klassi hidden əlavə edək, hansı ki, komponent klasının active xassəsindən asılı olaraq aktiv və ya deaktiv olacaq:

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

Həmçinin bir düymə edək, hansına kliklədikdə toggle metodu çağırılacaq və komponentimizi göstərəcək və ya gizlədəcək:

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

Üç blok verilib. Hər biri öz blokunu açıb-bağlayan üç düymə edin.