Dynamically change styles on Ionic 3 buttons

Ionic Framework ionic-v3
1

I have 5 round, outlined buttons, each with a number in it (1,2,3,4,5). If I tap any of the buttons, I want the style to change from outlined to regular (non-outlined). If I tap another button, the previous one goes back to outlined while the tapped one changes to regular.

How can I achieve that?

Here’s my HTML code

<ion-col col-4 *ngFor="let c of arrCredits">
   <button ion-button round [outline]="c.key != chosen" (click)="choosecredits(c)">${{c.key}}</button>
</ion-col>

and .ts code


ionViewDidLoad() {
//... other stuff

this.arrCredits = [{key:1}{key:2}{key:3}]
}
//... other stuff
choosecredits(c)
{ this.chosen = c.key;
}

As you can see, I was assuming each button had its own key, so that tapping a different button would change ‘chosen’, so that outline wouldn’t show in the chosen one, but that doesn’t work.

Thanks.

2

This is Ionic 4, but I would be very surprised to learn that the same fundamental idea wouldn’t work the same in previous versions:

  btns = [
    {key: 1},
    {key: 2},
    {key: 3},
    {key: 4},
    {key: 5},
  ];
  chosen: number | undefined;

 <ion-button *ngFor="let btn of btns" shape="round"
  [fill]="chosen !== btn.key ? 'outline' : 'clear'"
  (click)="chosen = btn.key">{{btn.key}}</ion-button>
3

Thanks for the suggestion, @rapropos. I tried it, but unfortunately, Ionic 3 doesn’t recognize the ‘fill’ attribute. It shows
Template parse errors: Can't bind to 'fill' since it isn't a known property of 'button'

Here’s the documentation https://ionicframework.com/docs/v3/api/components/button/Button/

4

Just figured it out. It was a typo. I initially had
this.chosencredits = c.key
in the choosecredits() function, but used
c.key != chosen in the HTML, instead of
c.key != chosencredits