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:

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

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

Contoh

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

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

Gunakan sifat ini sebagai nilai untuk gaya:

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

Contoh

Katakan kita mempunyai beberapa sifat boolean:

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

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

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

Masalah Praktikal