Pengikatan Gaya CSS dalam Angular

Dalam Angular, juga boleh untuk secara langsung menambah gaya untuk blok. Ini dilakukan dengan menggunakan atribut tag, yang ditulis dalam format berikut:

[style.sifatGaya]="nilai sifat"

Dalam kes ini, nama sifat CSS yang mempunyai sempang di dalamnya, dalam kes kami akan ditulis dalam camelCase. Mari kita lihat contoh bagaimana ini berfungsi.

Contoh

Mari tetapkan latar belakang untuk elemen:

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

Contoh

Katakan kita mempunyai beberapa sifat, yang mengandungi warna latar belakang:

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

Gunakan sifat ini sebagai nilai untuk gaya:

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

Contoh

Katakan kita mempunyai beberapa sifat boolean:

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

Kami akan mengikat pelbagai nilai CSS kepada sifat bergantung pada kandungan sifat boolean. Gunakan untuk ini pengendali ternary:

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

Masalah Praktikal

Diberi satu blok. Buat agar klik pertama pada blok mewarnakannya dengan warna merah, dan klik kedua - dengan warna hijau.

Diberi satu blok. Diberi satu butang. Buat agar tekanan pada butang menggandakan lebar blok.