การผูกคลาส CSS แบบหลายคลาสพร้อมกันใน Angular

ด้วยคำสั่ง ngClass คุณสามารถ เปิดและปิดชุด CSS class ในแท็กได้พร้อมกัน คำสั่งนี้รับค่าเป็น object โดยที่คีย์คือชื่อคลาส และค่าคือค่าบูลีน คลาสจะถูกเปิดใช้งาน หากกำหนดค่าเป็น true และจะถูกปิดใช้งานหากเป็น false

มาดูตัวอย่างการใช้งานกัน สมมติว่าเรามีคลาสดังต่อไปนี้:

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

.bold {
  font-weight: bold;
}

มาดูตัวอย่างวิธีการเปิดและปิดคลาสเหล่านี้สำหรับบล็อก

ตัวอย่าง

เปิดใช้งานหนึ่งคลาสและปิดอีกคลาสหนึ่ง:

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

ตัวอย่าง

สมมติว่าสถานะของคลาสเก็บอยู่ในคุณสมบัติของคลาส:

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

ผูกการแสดงผลของคลาสโดยขึ้นอยู่กับค่าของคุณสมบัติของเรา:

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

ตัวอย่าง

คุณสมบัติสามารถเป็น object ที่มีคลาสและสถานะทั้งหมด:

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

ผูก object นี้กับบล็อกของเรา:

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

ตัวอย่าง

สามารถรับค่าสำหรับ object ของเราจากคุณสมบัติอื่นของคลาส:

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

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

ผูก object นี้กับบล็อกของเรา:

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

โจทย์ฝึกปฏิบัติ