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

Question

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

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

Answer 1

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.