Angular-da CSS klasslarni massiv bog‘lash

ngClass direktivasi yordamida tegda bir vaqtning o‘zida bir nechta CSS klasslarini yoqish va o‘chirish mumkin. Direktiva qiymat sifatida ob'ektni qabul qiladi, uning kalitlari klasslar, qiymatlari esa mantiqiy qiymatlar bo‘ladi. Klass yoqiladi, agar unga true qiymati o‘rnatilgan bo‘lsa, va o‘chadi, agar false bo‘lsa.

Keling, amalda ko‘rib chiqaylik. Faraz qilaylik, bizda quyidagi klasslar mavjud:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Keling, blok uchun bu klasslarni qanday yoqish va o‘chirishni misollar orqali ko‘rib chiqaylik.

Misol

Bitta klassni yoqamiz va ikkinchisini o‘chiramiz:

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

Misol

Faraz qilaylik, klasslarning holatlari class xususiyatlarida saqlanadi:

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

Klasslarning ko‘rinishini bizning xususiyatlarimizning qiymatlariga bog‘lab qo‘yamiz:

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

Misol

Xususiyatda klasslar va ularning holatlari bilan butun bir ob'ekt bo‘lishi mumkin:

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

Keling, ushbu ob'ektni bizning blokimizga bog‘laymiz:

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

Misol

Ob'ektimiz uchun qiymatlarni classning boshqa xususiyatlaridan olish mumkin:

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

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

Keling, ushbu ob'ektni bizning blokimizga bog‘laymiz:

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

Amaliy vazifalar

Ikkita CSS klass yarating. Ulardan biri blokning fonini, ikkinchisi esa shrift hajmini aniqlasin.

Ikkita tugma yarating. Birinchi tugmani bosish birinchi klassni yoqsin/o‘chirsin, ikkinchi tugmani bosish esa ikkinchi klassni yoqsin/o‘chirsin.