CODEWITHSUNDEEP
angulartypescriptionic-framework
Yamona
Yamona

Reputation: 1130

Ionic button color change for specific button

I have multiple buttons like this

<button id="1" ion-button [color]="btnColor" (click)="btnActivate()">text</button>
<button id="2" ion-button [color]="btnColor" (click)="btnActivate()">text</button>
//etc..



btnColor: string = 'dark';

btnActivate() {
  this.btnColor = 'secondary';
}

When user click on any button the color change for all buttons. What I want is change the color attribute for the clicked button only or change based on ID of the button.

Upvotes: 0

Views: 4082

Answers (3)

Vivek Doshi
Vivek Doshi

Reputation: 58553

I Think all you need is this

Template side :

<button #first ion-button color="dark" (click)="btnActivate(first)">text</button>
<button #second ion-button color="dark" (click)="btnActivate(second)">text</button>

Component side :

btnActivate(ionicButton) {
    ionicButton.color =  'primary';
}

Link to working example (please check console / inspect the buttons) :

https://stackblitz.com/edit/ionic-change-button-color

Upvotes: 3

jitender
jitender

Reputation: 10429

Html

<button id="1" ion-button [ngClass]="{'btnActive': selectedId===1}"(click)="btnActivate(1)">text</button>
<button id="2" ion-button  [ngClass]="{'btnActive': selectedId===2}" (click)="btnActivate(2)">text</button>

Ts

selectedId:number= 1;
btnActivate(id:number)
{
   this.selectedId= id;
}

css

.btnActive
{
 background-color:red
}

Working demo

Upvotes: 0

Paresh Gami
Paresh Gami

Reputation: 4782

You have to [style.background-color] in button.

html

<div *ngFor="let btn of btnArray;let ind = index">
    <button ion-button [style.background-color]="btn.backgroudColor" (click)="btnActivate(ind)">{{btn.title}}</button>
</div>

ts

btnArray = 
[
    {
        "title":"Btn1",
        "backgroudColor":"#ff00ff"
    },
    {
        "title":"Btn2",
        "backgroudColor":"#ff00ff"
    },
    {
        "title":"Btn3",
        "backgroudColor":"#ff00ff"
    }
]
btnActivate(ind)
{
    this.btnArray[ind]['backgroudColor'] = "#ffff00";
}

Upvotes: 0

Related Questions