Angular ngClass Directive

Back to: Angular Tutorials For Beginners and Professionals

Angular ngClass Directive

In this article, I am going to discuss Angular ngClass Directive in Detail. Please read our previous article where we discussed Angular ngStyle Directive with some examples. At the end of this article, you will understand what exactly the ngClass Directive is and when and how to use this ngClass Directive in Angular Application?

What is Angular ngClass Directive?

The Angular ngClass directive is used to add or remove CSS classes dynamically (run-time) from a DOM Element. Here we will discuss the different mechanisms or methods to use the ngClass directive. They are as follows:

1. ngClass with string
2. ngClass with array
3. The ngClass with object
4. ngClass with component method

ngClass as a string:

Let us see an example to use ngClass as a string.

Modify app.component.css file:

First open the app.component.css file and then copy and paste the following CSS styles. These styles are going to be used in our HTML pages.

.one{
    color: red;
}
.two{
    font-size: 30px;
}
.three{
    font-weight: bold;
}
.four{
    font-style: italic;
}
.five{
    color: green;
}

Step2: Modify app.component.ts file

Open app.component.ts file and then copy and paste the following code in it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Step3: Modify the app.component.html file

The syntax to use the ngClass directive as a string is given below. You have to apply the class in between the single quote which is in between a pair of double quotes.

Let us understand this with an example. Please modify the app.component.html file as shown below. As you can see here we are applying the class one as string to the ngClass directive.

<h3 [ngClass]="'one'">
     Angular ngClass with String
</h3>

As the css class one holds one property color with value red, so when you browse you should get the message “Angular ngClass with String” in red color as shown in the below image.

Applying multiple css classes with ngClass Directive:

The syntax to use ngClass as a string with multiple css classes is given below. Here, you need to specify multiple classes separated by a space.

Let us see how to apply multiple css classes to ngClass directive with an example. Suppose, you want to apply red color along with you want display it in italic. That means now you need to apply two classes i.e. one and four. In order to do this, please modify the app.component.html file as shown below.

<h3 [ngClass]="'one four'">
     Angular ngClass with String
</h3>

Now if you browse application, then you should get the message with red color italic font as shown in the below image.

ngClass with Array:

This is very much similar to the previous example i.e. applying multiple css classes. The difference is only the way you applying the css classes. The syntax to use ngClass with Array is given below. Here, you need to use one square bracket and then you need to specify the classes in a single quotes separated by a comma.

For example, suppose you want to apply three css classes (three, four, five) to the ngClass directive as array. Then you need to modify the app.component.html file as shown below.

<h3 [ngClass]="['three', 'four', 'five']">
     Angular ngClass with String
</h3>

When you run the application, you should get the output as expected as as shown in the below image.

ngClass as object:

The syntax to use ngClass as object is given below. If you have worked with JSON then you can easily understand this syntax. In JSON we need to specify the data as key value pair. Here, the key is the class name and then value can be true or false. If you specify true then that class will be applied and value false means the class will not be applied.

Let us understand this with an example. Please modify the app.component.html file as shown below. As you can see we have applied three classes among which we have set the value to true for the classes one and three.

<h3 [ngClass]="{'one':true, 'two':false, 'three':true}">
     Angular ngClass with String
</h3>

Now if you browse the application, then you can see the classes one and three are applied while the class two is not applied to the DOM element.

ngClass with Method:

Let us understand this with an example.

First we need to create one method in the AppComponent class which will return the required CSS classes as an object. So, modify the app.component.ts file as shown below.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  AddCSSClasses(flag:string) {
    let Cssclasses;

    if(flag == "type1")
    {
      Cssclasses = {
        'one' : true,
        'two' : true
      }
    }
    else
    {
      Cssclasses = {
        'four' : true,
        'five' : true
      }
    }
    return Cssclasses;
}
}

Modify the app.component.html file as shown below to use method with ngClass directive.

<h3 [ngClass]="AddCSSClasses('type1')">
     Angular ngClass with String
</h3>

In the next article, I am going to discuss Angular Pipes with Examples. Here, in this article, I try to explain Angular ngClass Directive with some examples and I hope you enjoy this article and understood the different ways to use the ngClass directive in Angular Application.