NgClass Example Conditionally apply class

The Angular ngClass Directive is an Angular Attribute Directive, which allows us to add or remove CSS classes to an HTML element. ngClass makes adding a conditional class to an element easier, hence dynamically changing the styles at runtime. We can also add multiple CSS Classes.

NgClass

The ngClass is a directive that Angular uses to dynamically add or remove CSS classes to an HTML element based on certain conditions.

Where

The element is the DOM element to which we want to apply the CSS class.

The expression, when evaluated, must return a String, Array, or object. The ngClass Directive extracts the class name from the result and applies it to the element.

Let us explore all of them with examples.

We can add/remove classes to and from the element in three ways. One using the DOM ClassName Property. The second option is to use the Class shorthand (class binding). The third option is to use the NgClass Directive, which we cover in this tutorial.

ngClass Examples

Create a new angular project using ng new. Empty the app.component.html. Open the app.component.css with the following CSS styles.

You can view the source code from StackBlitz.

NgClass with a String

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

 Add the following to the app.template.html.

The above example code adds the multiple CSS Classes, primary & big, 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. As shown below, we must remove the double quote around the expression.

NgClass with Array

If the ngClass expression returns an array, Angular treats each array element as a CSS class.

The syntax is as follows.

This example below, passes the array with two elements. ngClass will treat each element as a class. The following code applies primary and big classes to the div element.

If there is a space between the string of an element, then both will be treated as a separate class. For example, in the code below, the array element at index 0 has the value primary big. It will treat this as two different classes.

NgClass with Object

You can also bind the ngClass to an object. The properties (keys) of the object will act as a class name. The properties must return a boolean value. If the return value is true, the class is applied. Else not.

The syntax is as follows.

If the property name contains spaces, it will treat it as two classes. But you need to use quotes around the property name. Quotes are also required if the class name has - etc.

In the example below, an object is bound to the ngClass. The object has two properties, primary and big. Since both return true, ngClass will apply both classes to the element.

The first property in the code below ( primary italics) has a space. ngClass will treat it as two separate classes. Hence it will apply three classes, primary, italics & big, to the element.

The property is-active has a –. Hence use the quote; else, it will result in an error.

Applying class from component 

We can dynamically change the CSS Classes from the component.

Create the following variable in the component class.

We can use them in the Template.

You can modify the variables anytime; the view will reflect these changes.

The ngClass Directive switches the CSS class based on the flag‘s value.

Conditionally applying class

One of the most important use cases of ngClass is we can conditionally apply the CSS classes.

For example, add the following code in the component class. The getClass return primary if the value of num is less than 50 and secondary otherwise.

In the HTML template, we use ngFor to loop over the numbers array and display the list. We invoke the getClass method and assign the return value to ngClass Directive.

You can write the expression in the Template itself, as shown below.

Vs. Class

You can also set CSS classes using the ClassName property or class binding. But ngClass is more flexible and is the preferred method.

You can view the source code from StackBlitz.

Summary

• ngClass is used the add conditional class to a HTML element.
• The syntax is <element [ngClass]="expression">...</element>
• The expression must return a string, array, or object.