Dynamic change color of button for specific button in Angular using Ionic?

Question

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

How can I change color of specific button? Suppose If I click on 1st button then what to do that only its [color] attribute is changed from “light” to “danger” ?

I have tried so many way, when I use ngClass it changes class for all the buttons. I have to change of clicked one and it should be toggle click means change/revert on each button. How can I achieve it?

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Oct 27, 2017 at 12:00
Thanks for being honest about your cross-posting. It is marked as solved over there, so perhaps you may need to clarify here what part is not solved. If you could also link from there to here, that would be good - undeclared cross-posting is a great way to waste people's time (since they spend time on giving help that the OP no longer needs). — halfer
– halfer, Commented Oct 27, 2017 at 12:02

anoop · Accepted Answer · 2017-10-27 06:50:30Z

1

You can achieve it by [style.background]="boolFlag ? 'blue' : 'red'", and toggling the flag on click event., like : (click)="boolFlag = !boolFlag "

See this Plunker for example

edited Oct 27, 2017 at 6:50

answered Oct 27, 2017 at 5:48

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harinder Singh Over a year ago

I am puzzled why this is not working on mine side! <button class="custom-button" ion-button (click)="boolFlag1 = !boolFlag1" [style.background]="boolFlag1 ? 'danger' : 'light'"><span>1</span></button>

anoop Over a year ago

this should work.., could you post your error scenario online on any editor like plunker?

Harinder Singh Over a year ago

Got it, danger and light are not colors they are just color varibales. We can use only color names or codes.

anoop Over a year ago

use actual color names, to use as property remove single qoute

Collectives™ on Stack Overflow

Dynamic change color of button for specific button in Angular using Ionic?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related