Binding Massal Kelas CSS di Angular

Dengan menggunakan direktif ngClass, kita dapat mengaktifkan dan menonaktifkan sekumpulan kelas CSS sekaligus dalam sebuah tag. Direktif ini menerima sebuah objek sebagai nilai, di mana kunci-kuncinya adalah nama kelas, dan nilainya adalah nilai boolean. Sebuah kelas akan diaktifkan jika nilainya diset ke true, dan dinonaktifkan jika false.

Mari kita lihat dalam praktiknya. 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 [ngClass]="{blue: true, 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;
}

Mari kita ikat visibilitas kelas tergantung pada nilai properti kita:

app/app.component.html<div [ngClass]="{blue: isBlue, bold: isBold}">
  text
</div>

Contoh

Sebuah properti dapat berisi seluruh objek dengan kelas-kelas dan statusnya:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Mari ikat objek ini ke blok kita:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Contoh

Nilai untuk objek kita bisa didapatkan dari properti kelas lainnya:

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

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

Mari ikat objek ini ke blok kita:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Tugas Praktis