NgClass In Angular

The Code Points May 28, 2022 0

In this article, we will learn about the ngClass In Angular. An Angular Attribute Directive, the ngClass Directive, allows us to add or delete CSS classes from an HTML element. You can use conditional expressions in ngClass to create dynamic styles in angular components.

Syntax of NgClass

The Angular ngClass Directive is an Angular Attribute Directive that lets us add or delete CSS classes from HTML elements. By using conditional expressions with ngClass, you may build dynamic styles in angular components.

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

The DOM element to which the class is applied is called an element.

The resultant classes are added/removed from the element once the expression is evaluated. The expression can take the form of a string, an array, or an object. Let's take a look at each one individually.

NgClass with a String

You can use String as an expression and connect it to the ngClass attribute directly. If you want to assign numerous classes, use a space between each one, as illustrated below.

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

Example

Open the app.component.css and add the following code:

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

Now, Open the app.component.html and add the following code:

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

The two CSS Classes red and size20 are applied to the div element in the example code above.

NgClass with Array

Instead of a string, an array can be used to achieve the identical result, as seen below. The ngClass array syntax is as follows.

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

Example

All you have to do is modify the app.component.html to the one shown below.

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

NgClass with Object

The ngClass can also be bound to an object. Each object's property name serves as a class name, and if it is true, it is applied to the element. The syntax is as follows:

Example of objects as CSS Classes

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

An object is bound to the ngClass in the example above. Red and size20 are two attributes of the object. As a class name, the property name is allocated to the div element.

Dynamically updating Class names

The CSS Classes of the component can be changed dynamically.

Using strings

To do so, in your component code, establish a string variable called cssStringVar and set the class names to it as seen below.

cssStringVar: string= 'red size20';

As shown below, you can refer to the cssStringVar in your template.

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

Using arrays

You can create an array of strings instead of a string variable, as seen below.

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

Then, in the ngClass directive, use it.

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

Using object

Create a class in your component as shown below.

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

Next, as seen below, create a CssClass object in the component. You can dynamically modify the value of the attribute from true to false.

cssClass: CssClass = new CssClass();

Then, in your template, refer to the cssClass.

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

Conclusion

In this article, we learned how to use the Angular NgClass directive. In the next article, we will learn how to customize your angular apps in a variety of ways.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.