Angular-da CSS uslublarini bog‘lash

Angular-da, shuningdek, to‘g‘ridan-to‘g‘ri blokga uslublarni qo‘shish mumkin. Bunga quyidagi formatda yozilgan tegnining atributi yordamida erishiladi:

html[style.uslubXususiyati]="xususiyat qiymati"

Bunda, ichida defis bo‘lgan CSS xususiyatlari nomlari, bizning holatda, camelCase da yoziladi. Keling, misollar orqali buning qanday ishlashini ko‘rib chiqaylik.

Misol

Elementga fon beramiz:

app/app.component.html<div [style.backgroundColor]="'blue'">
  text
</div>

Misol

Faraz qilaylik, bizda fon rangini o‘z ichiga olgan qandaydir xususiyat mavjud:

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

Keling, ushbu xususiyatni uslub qiymati sifatida qo‘llaymiz:

app/app.component.html<div [style.backgroundColor]="value">
  text
</div>

Misol

Faraz qilaylik, bizda qandaydir mantiqiy xususiyat mavjud:

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

Mantiqiy xususiyat tarkibiga qarab turli xil qiymatlarni CSS xususiyatiga bog‘laymiz. Buning uchun ternar operatoridan foydalanamiz:

app/app.component.html<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
  text
</div>

Amaliy vazifalar