Ionic 4 Changing color of all buttons instead of single when clicked , toggle

Ionic Framework
1

I’m trying to change the color of a single button when clicked, then when clicked again to undo the color change or change it back to its original color.
Similar to the docs as you can see at the bottom, change color: https://beta.ionicframework.com/docs/api/button

At the moment, I’m rendering multiple buttons through ngFor on the template side.
<ion-col class=“friend-col” *ngFor=“let friend of friendOptions”>
<ion-button [ngClass]="{‘my-css-class’: active === ‘friend’}" (click)=“updateActive(‘friend’)”>
{{friend}}
< /ion-button>
< /ion-col>

Styling:

.my-css-class{
–background: #488aff !important;
}

The active button when clicked will have taken on the css class that makes it active. On the component side, I have it set up like this:

updateActive(friend){
this.active = friend;
}

My issue is when a single button is clicked, it changes the color of all them instead of just one. Unsure what to do because this ngClass is set to all of the buttons.

Sep-26-2018%2021-50-25

2

You’re passing in the string ‘friend’ in to the updateActive(). So every button you click will be setting the variable friend=‘friend’.

should be
(click)="updateActive(friend)"
not
(click)="updateActive('friend')"

3

Thanks, that worked,

I just have two more questions:

Is there a way to toggle the color to change back? When clicked to revert back to its previous color.

And is there a way to click another button to change color without the other button changing back?

Sep-26-2018%2023-21-20