How to add class name dynamically

Ionic Framework ionic-v3
1

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

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

how can i do that.

2

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

page.html

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

page.ts

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

   ...

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

Its working fine.Thank your for your reply.

4

Hello,

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.

5

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