Angular NgClass Directive

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.

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.

Example

Add the following classes to the app.component.css

Add the following to the app.template.html

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.

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

Example

All you need to change the template as shown below

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

Example of objects as CSS Classes

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.

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

Using arrays

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

And, then use it in ngClass directive

Using JavaScript object

Create a class as shown below in your component

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

And then refer to the cssClass in your template.

You can download the source code from GitHub

Summary

We learned 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

Further Reading on Angular Styles

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top