How to add class name dynamically

I want to do that .when user click on button and change the class name dynamically.

<Div [ngClass]="item-red">
when user click on button.its should be changed to
<Div [ngClass]="item-blue">

how can i do that.

Many ways to do this. A general example would be to make your class name into a variable in your .ts file:


<div [class]="classVariable"></div>
<button ion-button (click)="changeClass()">Change The Class</button>


export class PagePage {
   className: string = 'one-class';


   changeClass () {
      this.className = 'another-class';
1 Like

Its working fine.Thank your for your reply.


how ever will concern.

Yesterday I would make a component with svg elements more customable and ran in the problem, that svg element with [class] throw an error. Something like [classname] is only readable. Searching on the net I found no solution. After a while try and error I found that changing from [class] to [ngClass] works fine.

best regards, anna-liebt.

Thanks Anna, this will help me and others if I need to use SVG drawings or icons.