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

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

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

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

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

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

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

app/app.component.css.hidden {
  display: none;
}

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

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

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

app/app.component.html<button (click)="toggle()">
  toggle
</button>