How to change button background color when clicked (but not other buttons)?

Ionic Framework
1

I have a grid of buttons, and I’m trying to change the background color of the most recently clicked button, but have the other buttons not have that background. Ideally I’d like to add a style to the most recently clicked button, and remove that style from all other buttons.

Currently my buttons are defined like this:

<ion-col size="6" 
  class="mainButton" 
  (click)="DoStuff(1, true)">
  <img src="assets/images/icon-aurora.png" height=70>
</ion-col>

I’m still wrapping my head around Ionic so please forgive anything silly that I’m doing. Here’s the function call (currently not working):

DoStuff(data: string, swapBg: boolean = false) {

    if (swapBg) {
      this.style.backgroundColor = '#345465';
    }

    return;

Any tips to change the background color of just the button that was clicked? Ideally without having to make a separate variable for each of the buttons, since I have a lot of them?

Is there some way to pass the ID of the clicked button, using “this”?

2

I would like to ask the stupid question of “why are you not using either the <ion-button> or <button> element for buttons?”.

3

I was having a bit of trouble getting full control over the look of the button. I should probably change that.

But shouldn’t this be possible with any clickable element?

4

Clickable isn’t really the operative issue: Ionic components have specific mechanisms for altering styling due to use of shadow DOM, so I asked the question so that you get your ducks in a row before committing to something that will need to be modified yet again if you do decide to use <ion-button>.

The general strategy, however, is the inverse of what your intuition seems to want to do (which is understandable, I encountered this incessantly when first working in reactive environments). Instead of trying to push changes out from your controller, you want to modify properties in the controller and pull them from bindings in your template. What I would probably do is to do the actual styling in SCSS, maintain an array with an entry corresponding to each button that contains all instance-specific stuff (such as probably the ‘1’ in that DoStuff call and the icon path), and throw a boolean in there as well that can be bound to a CSS class indicating that said button was the last one clicked.

After, of course, I investigated whether or not I was really just reinventing <ion-segment>, because if so, it will likely be much simpler to just use that.

5

It seems this code inactivated my other event handlers from triggering.

6

The function doesn’t work, so comment out the action that swaps the BG. But I’m able to run the other code just fine in my environment (ionic 4). Strange of that’s breaking your event handlers.