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:

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

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

Contoh

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

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

Mari terapkan properti ini sebagai nilai untuk style:

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

Contoh

Misalkan kita memiliki beberapa properti boolean:

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

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

Tugas Praktis