Dynamic change color of button for specific button

    <ion-col col-3>
                <button ion-button (click)="onPunchPress($event)"><span>1</span></button>
            <ion-col col-3>
                <button ion-button (click)="onPunchPress($event)"><span>2</span></button>

How can I change color of specific button? Suppose If I click on 1st button then what to do that only it’s
[color] attributre is changed from “light” to “danger” ?
Please help urgent need!

have you tried ngClass attribute?

1 Like

ngClass will change for all buttons,

I want to change only clicked buttons class or color attribute. Toggle class on each and every button.

no brother, it will not change for all buttons.
you have to set condition in ngclass

declare any variable in ts file such as : btnCurrent : int = 0

then in html file set the value of btnCurrent on button click event such as :
<button ion-button (click)="btnCurrent =1"><span>1</span></button>
<button ion-button (click)="btnCurrent =2"><span>2</span></button>

and in ngClass put condition according to btnCurrent such as :
<button ion-button ngClass="{ 'yourcssclass': btnCurrent ==1}" (click)="btnCurrent =1"><span>1</span></button>
<button ion-button ngClass="{ 'yourcssclass': btnCurrent ==2}" (click)="btnCurrent =2"><span>2</span></button>

1 Like

If button 1 was pressed then button 2 pressed. Button 1 color change must be there. That not need to be change means toggle on click of each and every button bro.

then you can take unique varible for every button and check it in ngClass!!

1 Like

How? Can you show me little demo? You means somehting like btnCurrent ,btnCurrent1,btnCurrent3? Is that good logic?

and to apply toggle effect u have to take boolean variable and set value on click event such as :
(click)=" btn1= !btn1"

1 Like

there is no other way to achieve it because i waste 1 week for this topic

1 Like

Oops! We can’t do some thing like (click)=“somefunction($event)” on button click? And add [color] attribute to that button based on event? Means like jquery we can add attribute and remove attribute (classes too) ? toggle?

yes, you can
but using jquery it may be a long process to achieve toggle effect and all other stuff and you haave to do R&D on google for it !!

1 Like

Yup, But all the things will be dynamic then.

Process will be :slight_smile:


// add attr if not exists
//remove attr if exists
// if attr, then func based on it.
// if not attr, then func based on it.

this is basic jqury to do

$(this).css('background-color', 'blue');

1 Like


may be because i dont have enough knowledge about jquery. i used basic jquery thats it

1 Like

Thanks bro, you have helped me alot!

1 Like

Not working!!!