Table of Contents
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;
}
