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:

html[class.klass_nomi]="true yoki false"

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

app/app.component.css.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:

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

Misol

Faraz qilaylik, klasslarning holatlari class xususiyatlarida saqlanadi:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

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

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

Amaliy vazifalar

app/app.component.css.hidden {
  visibility: hidden;
}