CSS siniflarinin Angular-da topda baglanmasi

ngClass direktivi vasitəsilə teqdə dərhal bir dəst CSS sinifini açmaq və bağlamaq olar. Direktiv dəyər kimi açarı siniflər, dəyəri isə boolean dəyərlər olan bir obyekt qəbul edir. Sinif üçün dəyər true təyin edildikdə aktiv olacaq, false təyin edildikdə isə deaktiv olacaq.

Gəlin praktikada baxaq. Tutaq ki, bizdə aşağıdakı siniflər var:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Gəlin blok üçün bu sinifləri necə aktiv və deaktiv edəcəyimizə nümunələrlə baxaq.

Nümunə

Gəlin bir sinifi aktiv edək, digərini isə deaktiv edək:

<div [ngClass]="{blue: true, bold: false}">
	text
</div>

Nümunə

Tutaq ki, siniflərin vəziyyətləri sinifin xassələrində saxlanılır:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Sinifin görünmə əmsalını xassələrimizin dəyərlərindən asılı olaraq bağlayaq:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Nümunə

Xassədə siniflər və vəziyyətlər olan tam bir obyekt ola bilər:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Gəlin bu obyekti blokumuzla bağlayaq:

<div [ngClass]="styles">
	text
</div>

Nümunə

Obyektimiz üçün dəyərləri sinifin digər xassələrindən almaq olar:

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Gəlin bu obyekti blokumuzla bağlayaq:

<div [ngClass]="styles">
	text
</div>

Praktiki tapşırıqlar

Iki CSS sinifi yaradın. Onlardan biri blokun fonunu, digəri isə şrift ölçüsünü müəyyən etsin.

Iki düymə hazırlayın. Birinci düyməyə klikləmək birinci sinifi açıb bağlasın, ikinci düyməyə klikləmək isə ikinci sinifi açıb bağlasın.