Tutorial

Class Binding & NgClass in Angular 2

Angular

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

It’s easy to bind CSS classes to elements in your Angular 2 templates. You provide a class name with class.className between brackets in your templates and then an expression on the right that should evaluate to true or false to determine if the class should be applied. Here’s how you would bind a single class for example:

<div [class.active]="isActive">
  ...
</div>

NgClass for multiple classes

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;
}

See Also

Creative Commons License