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.
Table of Contents
NgClass
The ngClass
directive adds and removes CSS classes on an HTML element. The syntax of the ngClass
is as shown below.
1 2 3 | <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.
1 2 3 | <element [ngClass]="'cssClass1 cssClass2'">...</element> |
Example
Add the following classes to the app.component.css
1 2 3 4 | .red { color: red; } .size20 { font-size: 20px; } |
Add the following to the app.template.html
1 2 3 | <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.
1 2 3 4 5 | <div class="row"> <div ngClass='red size20'>Red Text with Size 20px </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
1 2 3 | <element [ngClass]="['cssClass1', 'cssClass2']">...</element> |
Example
All you need to change the template as shown below
1 2 3 | <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
1 2 3 | <element [ngClass]="{'cssClass1': true, 'cssClass2': true}">...</element> |
Example of objects as CSS Classes
1 2 3 4 5 | <div class="row"> <div [ngClass]="{'red':true,'size20':true}">Red Text with Size 20px</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.
1 2 3 | cssStringVar: string= 'red size20'; |
You can refer to the cssStringVar
in your template as shown below
1 2 3 4 5 | <div class="row"> <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.
1 2 3 | cssArray:string[]=['red','size20']; |
And, then use it in ngClass
directive
1 2 3 4 5 6 7 | <div class="row"> <div [ngClass]="cssArray"> Red Text with Size 20px : from CSS Array </div> </div> |
Using JavaScript object
Create a class as shown below in your component
1 2 3 4 5 6 | 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
1 2 3 | cssClass: CssClass = new CssClass(); |
And then refer to the cssClass in your template.
1 2 3 4 5 | <div class="row"> <div [ngClass]="cssClass"> Red Text with Size 20px : from component as object</div> </div> |
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