Pengikatan Kelas CSS Secara Pukal dalam Angular

Dengan menggunakan arahan ngClass, kita boleh menghidupkan dan mematikan satu set kelas CSS dalam tag sekaligus. Arahan ini menerima nilai objek, di mana kuncinya adalah kelas, dan nilainya ialah nilai boolean. Kelas akan dihidupkan jika nilainya ditetapkan kepada true, dan dimatikan jika false.

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

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

.bold {
  font-weight: bold;
}

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

Contoh

Hidupkan satu kelas dan matikan yang lain:

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

Contoh

Katakan keadaan kelas disimpan dalam sifat kelas:

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

Ikatkan keterlihatan kelas bergantung kepada nilai sifat kita:

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

Contoh

Sifat boleh mengandungi keseluruhan objek dengan kelas dan keadaannya:

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

Ikatkan objek ini kepada blok kita:

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

Contoh

Nilai untuk objek kita boleh didapatkan dari sifat kelas lain:

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

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

Ikatkan objek ini kepada blok kita:

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

Latihan Praktikal