Change color of a button from a list


#1

consider this

<button ion-button *ngFor=“let d of ds” (click)=“whenClick()”>
click

whenClick(){
//this code should change specific button color
}

by this code assume 10 buttons generated.
if i click on 7th button only seventh button color should change.
do anyone have idea


#2

The most straightforward way I can think of to handle this is to have some sort of property on each d object that indicates the color, and whenClick() should modify it accordingly.


#3

good option
but i actually don’t want to disturb d
but i try this too, thanks


#4
<button ion-button *ngFor="let d of ds; let i = index" (click)="changeColor(i)"></button>

Including let i = index gives you some power to start accessing specific buttons just by tracking the index. There’s more to it, but that’s a good head start


#5
  <div *ngFor="let btn of btns">
    <button full ion-button *ngIf="!btn.clicked" (click)="clickEvent(btn)" color="primary">
      btn {{btn.btnid}}
    </button>
    <button full ion-button *ngIf="btn.clicked" (click)="unclickEvent(btn)" color="danger">
      btn {{btn.btnid}}
    </button>
  </div>

btns:any[]=[];

constructor(public navCtrl: NavController) {
for(var i=1;i<5;i++){
this.btns.push({btnid:i,clicked:false});
}
}

clickEvent(btn){
btn.clicked=true;
}

unclickEvent(btn){
btn.clicked=false;
}

this is i want worked great

Thanks @jaydz @rapropos