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:

[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:

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

Misol

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

export class AppComponent {
	public value: string = 'red';
}

Keling, ushbu xususiyatni uslub qiymati sifatida qo‘llaymiz:

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

Misol

Faraz qilaylik, bizda qandaydir mantiqiy xususiyat mavjud:

export class AppComponent {
	public isActive: boolean = true;
}

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

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

Amaliy vazifalar

Blok berilgan. Blokni birinchi marta bosilganda uni qizil rangga, ikkinchi marta bosilganda esa yashil rangga bo‘yashni ta'minlang.

Blok berilgan. Tugma berilgan. Tugmani bosish blok kengligini ikki baravar oshirishini ta'minlang.