Binding Kelas CSS di Angular

Di Angular, Anda dapat mengaktifkan dan menonaktifkan penerapan kelas CSS untuk sebuah blok. Hal ini dilakukan dengan menggunakan atribut tag, yang ditulis dalam format berikut:

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

Mari kita lihat dalam praktik. Misalkan kita memiliki kelas-kelas berikut:

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

.bold {
  font-weight: bold;
}

Mari kita lihat contoh-contoh cara mengaktifkan dan menonaktifkan kelas-kelas ini untuk sebuah blok.

Contoh

Aktifkan satu kelas dan nonaktifkan kelas lainnya:

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

Contoh

Misalkan status kelas disimpan dalam properti kelas:

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

Ikat visibilitas kelas tergantung pada nilai properti kita:

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

Tugas Praktis

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