Angular 5 | Class Binding | NgClass Directive

In this article we will see how can we bind CSS class to HTML element (class binding) in Angular 5. We will also discuss about ngClass directive to add or remove multiple classes from HTML element with example.

Examples

I have already created first-app component in my Angular 5 application.

In first-component.component.css file include the following three CSS classes.

.class-success{
 color:green;
}

.class-fail{
 color:red;
}

.class-special{
 font-style: italic;
}

In first-app.component.ts, include an <h2> element as shown below. Notice we have set the class attribute of the <h2> element to ‘class-success’.

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-first-component',
 template: `<h2 class='class-success'>Code 4 Developers</h2> `,
 styleUrls: ['./first-component.component.css']
})

export class FirstComponentComponent implements OnInit {
 constructor() { }
 ngOnInit() {
 }
}

At this point, run the application and notice that the class-success is added to the <h2> element as expected.

Modify the code in first-component.component.ts as shown below.

We have added a property ‘classesToApply’in FirstComponent class.
We have also specified class binding for the <h2> element. The word ‘class’ is in a pair of square brackets and it is binded to the property ‘classesToApply’
This will replace the existing css classes of the <h2> with classes specified in the class binding.

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-first-component',
 template: `<h2 class='class-success' [class]='classesToApply'>Code 4 Developers</h2> `,
 styleUrls: ['./first-component.component.css']
})

export class FirstComponent implements OnInit {
 public classesToApply='class-fail class-special'
 constructor() { }
 ngOnInit() {
 }
}

Run the application and notice class-success is removed and class-fail, class-special classes are added.

Add or Remove single class

To add or remove a single class, include the prefix ‘class’ in a pair of square brackets, followed by a DOT and then the name of the class that you want to add or remove.
The following example adds class-special to the <h2> element. Notice it does not remove the existing class-success already added using the class attribute.
If you change applySpecialClass property to false or remove the property from the FirstComponent class, css class is not added to the <h2> element.

Example :

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-first-component',
 template: `<h2 class='class-success' [class.class-special]='applySpecialClass'>Code 4 Developers</h2> `,
 styleUrls: ['./first-component.component.css']
})

export class FirstComponent implements OnInit {
 public applySpecialClass =true;
 constructor() { }
 ngOnInit() {
 }
}

You can also remove an existing class that is already applied.

Consider the following example. Notice we have 3 classes (class-success & class-special) added to the <h2> element using the class attribute. The class binding removes the class-special.

Example:

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-first-component',
 template: `<h2 class='class-success class-special'[class.class-special]='applySpecialClass'>Code 4 Developers</h2> `,
 styleUrls: ['./first-component.component.css']
})

export class FirstComponent implements OnInit {
 public applySpecialClass =false;
 constructor() { }
 ngOnInit() {
 }
}

To add or remove multiple classes use ngClass directive as shown in the example below.

Added three public property with default values in FirstComponent:

public isSuccess=false;
public isFail=true;
public isSpecial=true;

Add object styleClasses having with 3 key/value pairs. The key is a CSS class name. The value can be true or false. True to add the class and false to remove the class.

public styleClasses ={
"class-success": this.isSuccess,
"class-fail":this.isFail,
"class-special":this.isSpecial
}

Since two keys (class-fail & class-special) are set to true, both classes will be added to the <h2> element. Here class-success will not apply as corresponding property value isSuccess is false.
Use ngClass directive with square bracket in HTML code and assign object name.

<h2 [ngClass]="styleClasses">Code 4 Developers</h2>

Example for ngClass directive:

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-first-component',
 template: `<h2 [ngClass]="styleClasses">Code 4 Developers</h2> `,
 styleUrls: ['./first-component.component.css']
})

export class FirstComponent implements OnInit {
 public isSuccess=false;
 public isFail=true;
 public isSpecial=true;

 public styleClasses ={
  "class-success": this.isSuccess,
  "class-fail":this.isFail,
  "class-special":this.isSpecial
 }

 constructor() { }

 ngOnInit() {
 }

}

Run the application and notice class-success is not applied as the component property isSuccess is set to false but class-fail and class-special is applied because isFail is set to true and isSpecial is set to true.