Binding CSS Styles di Angular

Di Angular juga bisa secara langsung menambahkan styles untuk blok. Hal ini dilakukan dengan menggunakan atribut tag, yang ditulis dalam format berikut:

[style.namaPropertiStyle]="nilai properti"

Dengan demikian, nama properti CSS yang memiliki tanda hubung di dalamnya, dalam kasus kita akan ditulis dalam camelCase. Mari kita lihat contoh-contoh bagaimana ini bekerja.

Contoh

Mari atur latar belakang untuk elemen:

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

Contoh

Misalkan kita memiliki beberapa properti, yang berisi warna latar belakang:

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

Mari terapkan properti ini sebagai nilai untuk style:

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

Contoh

Misalkan kita memiliki beberapa properti boolean:

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

Kita akan mengikat berbagai nilai untuk properti CSS tergantung pada isi dari properti boolean. Mari gunakan untuk ini operator ternary:

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

Tugas Praktis

Diberikan sebuah blok. Buatlah agar klik pertama pada blok mewarnainya menjadi merah, dan klik kedua - menjadi hijau.

Diberikan sebuah blok. Diberikan sebuah tombol. Buatlah agar tekanan pada tombol meningkatkan lebar blok menjadi dua kali lipat.