Class Binding

Ở trong Component Class, định nghĩa các biến boolean

export class AppComponent {
  ...
  
  hasBackGround = false;
  hasBorder = false;
}

Để check điều kiện cho một hoặc nhiều class trong 1 Angular Component, ta có các cách sau:

1. [class.tên-class]

<div class="box" [class.bg-red]="hasBackGround" [class.b-yellow]="hasBorder">
  BOX
</div>

2. [class]=”object”

<div class="box" [class]="{ 'bg-red': hasBackGround, 'b-yellow': hasBorder }">
  BOX
</div>

3. [class]=”variable”

export class AppComponent {
  ...
  
  classes="box bg-red b-yellow";
}

<div class="box" [class]="classes">BOX</div>