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

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

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

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

ตัวอย่าง

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

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

ตัวอย่าง

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

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

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

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

ตัวอย่าง

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

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

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

<div [ngClass]="styles">
	text
</div>

ตัวอย่าง

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

export class AppComponent {
	public isBlue: boolean = false;
	public isBold: boolean = true;

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

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

<div [ngClass]="styles">
	text
</div>

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

สร้าง CSS class จำนวนสองคลาส ให้คลาสหนึ่งกำหนดพื้นหลังของบล็อก และคลาสที่สองกำหนดขนาดฟอนต์

สร้างปุ่มสองปุ่ม เมื่อกดปุ่มแรกให้สลับสถานะคลาสแรก และเมื่อกดปุ่มที่สองให้สลับสถานะคลาสที่สอง