การเปลี่ยนแปลงสไตล์แบบไดนามิกใน Angular

ด้วย directives ngClass และ ngStyle คุณสามารถผูกนิพจน์ กับองค์ประกอบได้ ซึ่งจะทำให้สไตล์ของเรา เปลี่ยนแปลงได้แบบไดนามิก

มาทำให้ข้อความถูกซ่อน หรือแสดงด้วยคุณสมบัติ active ของคลาสคอมโพเนนต์กัน:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

สำหรับสิ่งนี้ เราจะเขียนฟังก์ชัน toggle ซึ่งจะสลับเปิดหรือปิดคุณสมบัตินี้สลับกันไปมา:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

ในไฟล์ CSS ของคอมโพเนนต์ กำหนดสไตล์ต่อไปนี้ ให้กับคลาส:

.hidden {
	display: none;
}

ในเทมเพลตของคอมโพเนนต์ สร้าง div และ เพิ่ม CSS คลาส hidden ให้กับมัน ซึ่ง จะเปิดหรือปิดการทำงานขึ้นอยู่กับ คุณสมบัติ active จากคลาส คอมโพเนนต์:

<div [ngClass]="{hidden: active}">
	text
</div>

มาสร้างปุ่มด้วย โดยเมื่อคลิกที่ปุ่ม จะเรียกใช้เมธอด toggle เพื่อแสดงหรือซ่อนคอมโพเนนต์ของเรา:

<button (click)="toggle()">
	toggle
</button>

กำหนดให้มีสามบล็อก สร้างสามปุ่ม โดยแต่ละ ปุ่มจะทำการสลับการแสดงผลบล็อกของตัวเอง