Angular-da CSS klasslarni bog‘lash

Angular-da blok uchun CSS klassini qo‘llashni yoqish-o‘chirish mumkin. Buni quyidagi formatda yozilgan teg atributi yordamida amalga oshiriladi:

[class.klass_nomi]="true yoki false"

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

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

Misol

Bitta klassni yoqamiz va ikkinchisini o‘chiramiz:

<div [class.blue]="true" [class.bold]="false">
	matn
</div>

Faraz qilaylik, klasslarning holatlari class xususiyatlarida saqlanadi:

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

Klassning ko‘rinishini bizning xususiyatlarimiz qiymatlariga bog‘lab qo‘yamiz:

<div [class.blue]="isBlue" [class.bold]="isBold">
	matn
</div>

Quyidagi CSS klass berilgan:

.hidden {
	visibility: hidden;
}

Ushbu klassni blokka bog‘lang. Bosilganda blok yashirinadigan yoki ko‘rinadigan tugma yarating.