Class Binding

Angular 提供了 [class.className]="condition" 的語法來動態綁定 class

基本語法

<!-- Angular -->
<div [class]="isActive">content</div>

這個功能等同於 Vue 中的 class 綁定：

<!-- Vue -->
<div :class="{ active: isActive }">content</div>

多個 Class 的綁定

在 Angular 中可以這樣寫：

<!-- Angular -->
<div 
  [class.active]="isActive"
  [class.error]="hasError">
  content
</div>

相同功能在 Vue 中的寫法：

<!-- Vue -->
<div :class="{ 
  active: isActive,
  error: hasError 
}">
  content
</div>

主要差異：

1. Angular 的寫法是分開綁定每個 class

2. Vue 的寫法是用物件統一管理

使用時機

• 當需要根據某個條件動態切換 class 時使用

• 適合用於：

  • 切換元素的狀態（active/inactive）

  • 顯示錯誤狀態

  • 處理 UI 互動效果

ngClass 指令

當需要管理多個 class 時，使用 [ngClass] 會比較方便：

<!-- Angular ngClass -->
<div [ngClass]="{
  'active': isActive,
  'error': hasError,
  'highlight': isHighlighted
}">
  content
</div>

這個寫法在 Vue 中是：

<!-- Vue 多個 class -->
<div :class="{
  active: isActive,
  error: hasError,
  highlight: isHighlighted
}">
  content
</div>

選擇建議：

• 1-2 個 class：使用 [class.className]="condition"

• 3個以上的 class：使用 [ngClass]

實際範例

// component.ts
export class MyComponent {
  isActive: boolean = false;
  
  toggleActive() {
    this.isActive = !this.isActive;
  }
}

<!-- component.html -->
<button 
  [class.active]="isActive"
  (click)="toggleActive()">
  Toggle Active
</button>