// Tutorial //

Class Binding & NgClass in Angular 2

Published on October 25, 2016
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Class Binding & NgClass in Angular 2

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


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment