Pengikatan Kelas CSS dalam Angular

Dalam Angular, anda boleh menghidupkan dan mematikan penerapan kelas CSS untuk sesuatu blok. Ini dilakukan dengan menggunakan atribut tag, yang ditulis dalam format berikut:

html[class.nama_kelas]="true atau false"

Mari kita lihat dalam praktik. Katakan kita mempunyai kelas-kelas berikut:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Mari kita lihat dengan contoh, bagaimana untuk menghidupkan dan mematikan kelas-kelas ini untuk sesuatu blok.

Contoh

Hidupkan satu kelas dan matikan kelas yang lain:

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  text
</div>

Contoh

Katakan keadaan kelas disimpan dalam sifat-sifat kelas:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Ikatkan keterlihatan kelas bergantung kepada nilai sifat-sifat kita:

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  text
</div>

Masalah Praktikal

app/app.component.css.hidden {
  visibility: hidden;
}