การผูก CSS สไตล์ใน Angular

ใน Angular ยังสามารถ เพิ่มสไตล์ให้กับบล็อกโดยตรงได้อีกด้วย สิ่งนี้ทำได้ด้วย ความช่วยเหลือของแอตทริบิวต์แท็ก ที่เขียนใน รูปแบบต่อไปนี้:

[style.styleProperty]="property value"

ทั้งนี้ชื่อคุณสมบัติ CSS ที่มี เครื่องหมายยัติภัง (hyphen) อยู่ภายใน ในกรณีของเราจะ เขียนในรูปแบบ camelCase มาดูตัวอย่างกันว่า มันทำงานอย่างไร

ตัวอย่าง

มากำหนดพื้นหลังให้กับองค์ประกอบ:

<div [style.backgroundColor]="'blue'">
	text
</div>

สมมติว่าเรามีคุณสมบัติบางอย่าง ที่เก็บสีพื้นหลัง:

export class AppComponent {
	public value: string = 'red';
}

ลองใช้คุณสมบัตินี้เป็นค่า สำหรับสไตล์:

<div [style.backgroundColor]="value">
	text
</div>

สมมติว่าเรามีคุณสมบัติประเภทบูลีน:

export class AppComponent {
	public isActive: boolean = true;
}

เราจะผูกค่าต่าง ๆ ให้กับคุณสมบัติ CSS ขึ้นอยู่กับเนื้อหาของ คุณสมบัติบูลีน โดยใช้ ตัวดำเนินการ ternary:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

กำหนดบล็อก ทำให้การคลิกครั้งแรก บนบล็อกเปลี่ยนสีเป็นสีแดง และการคลิกครั้งที่สอง เปลี่ยนเป็นสีเขียว

กำหนดบล็อก กำหนดปุ่ม ทำให้ การกดปุ่มเพิ่มความกว้างของบล็อก เป็นสองเท่า