Search code examples
cssangularproperty-binding

Syntax for adding/removing CSS class using [ngClass] in Angular based on condition

How to add/remove one CSS class when either of the two boolean is true?

[ngClass]="{'load': loading , 'load': loadClass}"
Solution

  • Try this:

    [class.load]="loading || loadClass"

    OR

    [ngClass]="{'load': loading || loadClass }"

    [ngClass] can also use a function:

    <div [ngClass]="setMyClasses()">
  ...
</div>

    Where:

    setMyClasses() {
  let classes = {
    important: this.isImportant,
    inactive: !this.isActive,
    saved: this.isSaved,
    long: this.name.length > 6
  };
  return classes;
}

    This can be extended over various logical evaluation combinations using AND, OR, NOT etc.