Angular

Last Updated: 6/15/2023

Class Binding

  • Additionally add or remove class based on some condition
  • If the condition evaluates to true the target class will be added or if the class exist it will be removed
  • Use normal class attribute that you want to keep all times
<button class="btn btn-primary" [class.active]="isActive">Save</button>

Single class binding

[class.foo]="hasFoo"
  • input type: boolean | undefined | null, example input values - true, false

Multi class binding

[class]="classExpr"
  • The expression can be one of:
    • A space-delimited string of class names.
    • An object with class names as the keys and truthy or falsy expressions as the values.
    • An array of class names.

string

[class]="my-class-1 my-class-2 my-class-3"

object

[class]="{foo: true, bar: false}"

array

[class]="[foo', 'bar']"

Reference

https://angular.io/guide/class-binding

Previous
Next