Angular NgClass Directive - TekTutorialsHub

The Angular ngClass Directive is an Angular Attribute Directive, which allows us to add or remove CSS classes to an HTML element. Using ngClass you can create dynamic styles in angular components by using conditional expressions.

NgClass

The ngClass directive adds and removes CSS classes on an HTML element. The syntax of the ngClass is as shown below.


<element [ngClass]="expression">...</element>

Where

element is the DOM element to which class is being applied

expression is evaluated and the resulting classes are added/removed from the element. The expression can be in various formats like string, array or an object. Let us explore all of them with example

NgClass with a String

You can use the String as expression and bind it to directly to the ngClass attribute. If you want to assign multiple classes, then separate each class with space as shown below.


<element [ngClass]="'cssClass1 cssClass2'">...</element>

Example

Add the following classes to the app.component.css


.red { color: red; }
.size20 { font-size: 20px; }

.red { color: red; }

.size20 { font-size: 20px; }

Add the following to the app.template.html


<div [ngClass]="'red size20'"> Red Text with Size 20px </div>

The above example code adds the two CSS Classes red & size20 to the div element.

You can also use the ngClass without a square bracket. In that case, the expression is not evaluated but assigned directly to the class attribute. We also need to remove the double quote around the expression as shown below.


<div class="row">     
    <div ngClass='red size20'>Red Text with Size 20px </div> 
</div>

</div>

NgClass with Array

You can achieve the same result by using an array instead of a string as shown below. The syntax for ngClass array syntax is as shown below


<element [ngClass]="['cssClass1', 'cssClass2']">...</element>

Example

All you need to change the template as shown below


<div [ngClass]="['red','size20']">Red Text with Size 20px </div>

NgClass with Object

You can also bind the ngClass to an object. Each property name of the object acts as a class name and is applied to the element if it is true. The syntax is as shown below


<element [ngClass]="{'cssClass1': true, 'cssClass2': true}">...</element>

Example of objects as CSS Classes


<div class="row">     
  <div [ngClass]="{'red':true,'size20':true}">Red Text with Size 20px</div>
</div>

</div>

In the above example, an object is bound to the ngClass. The object has two properties red and size20. The property name is assigned to the div element as a class name.

Dynamically updating Class names

We can dynamically change the CSS Classes from the component.

Using strings

To do that first create a string variable cssStringVar in your component code and assign the class names to it as shown below.


cssStringVar: string= 'red size20';

cssStringVar: string= 'red size20';

You can refer to the cssStringVar in your template as shown below


<div class="row">     
   <div [ngClass]="cssStringVar">Red Text with Size 20px : from component     </div> 
</div>

<div [ngClass]="cssStringVar">Red Text with Size 20px : from component </div>

</div>

Using arrays

Instead of string variable, you can create a array of string as shown below.


cssArray:string[]=['red','size20'];

cssArray:string[]=['red','size20'];

And, then use it in ngClass directive


<div class="row">
  <div [ngClass]="cssArray">
    Red Text with Size 20px  : from CSS Array
  </div>
</div>

Red Text with Size 20px : from CSS Array

</div>

Using JavaScript object

Create a class as shown below in your component


class CssClass {
  red: boolean= true;
  size20: boolean= true; 
}

class CssClass {

red: boolean= true;

size20: boolean= true;

}

Next, create the instance of the CssClass in the component as shown below. You can change the value of the property true as false dynamically


cssClass: CssClass = new CssClass();

cssClass: CssClass = new CssClass();

And then refer to the cssClass in your template.


<div class="row">     
  <div [ngClass]="cssClass"> Red Text with Size 20px : from component as object</div> 
</div>

<div [ngClass]="cssClass"> Red Text with Size 20px : from component as object</div>

</div>

You can download the source code from GitHub

Summary

We learnt how to use the angular NgClass directive, with examples. There are many ways you can style the angular apps, which you can learn from the following tutorials

NgClass

NgClass with a String

Example

NgClass with Array

Example

NgClass with Object

Dynamically updating Class names

Using strings

Using arrays

Using JavaScript object

Summary

Leave a Reply