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 Content
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
Further Reading on Angular Styles