How to Add & Remove CSS Classes dynamically in Angular?

Bhairab Dutt8y ago

Accepted answer

Hi Sanjit,

You can use Class Binding as:

Class Binding

app.component.ts

//added for Class Binding
classproperty: boolean = true;

app.component.html

"color:blue">Class Binding
class.myclass]="classproperty">Class Heading

styles.css

.myclass{
font-size: 28px;
}

or
You can use [ngClass] Directive .

Example:

<div [ngClass]="{'active': isActive}">
I am Here
div>

In the above active is the css class and isActive is the property which you will add in compoent.ts file as boolean.
If you want to read about more binding in Angular 4 , You can read my Article :
https://www.c-sharpcorner.com/article/learn-binding-in-angular/

Hope Its help you.
Thanks.

Bhairab Dutt8y ago

Its my pleasure. Its a great process to solve the problem .

Sanjit Kumar Singh8y ago

Thank you Bhairab for the quick response.

How to Add & Remove CSS Classes dynamically in Angular?

"color:blue">Class Binding