Class Binding & NgClass in Angular 2

When multiple classes should potentially be added, the NgClass directive comes in really handy. NgClass should receive an object with class names as keys and expressions that evaluate to true or false as values:

<div [ngClass]="myClasses">
  ...
</div>

And then myClasses would be a property in the component that contains an object that looks like this:

myClasses = {
  important: this.isImportant,
  inactive: !this.isActive,
  saved: this.isSaved,
  long: this.name.length > 6
}

Of course the object can also be the return value of a method:

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

In the associated component class

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

• Style binding + NgStyle