Estoy intentando cambiar el color de un button cuando se hace click, he conseguido que se cambie todos los button pero no consigo que solo se cambie al que hago click.
.html
<ion-content padding>
<button #button1 [color]="myColor" ion-button outline round class="text-on-
bottom" (click)="falta($event)">
<ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
<p>Jose Yeste</p>
</button>
<button #button2 [color]="myColor" ion-button outline round class="text-
on-bottom" (click)="falta($event)">
<ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
<p>Name</p>
</button>
<button #button3 [color]="myColor" ion-button outline round class="text-
on-bottom" (click)="falta()">
<ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
<p>Namme</p>
</button>
<button #button4 [color]="myColor" ion-button outline round class="text-on-bottom" (click)="falta()">
<ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
<p>AName</p>
</button>
<button #button5 [color]="myColor" ion-button outline round class="text-on-bottom" (click)="falta()">
<ion-icon><img src="/assets/images/YO2.png" ></ion-icon>
<p>Name</p>
</button>
</ion-content>
.ts
@Component({
selector: 'page-list-alumnos',
templateUrl: 'list-alumnos.html',
})
export class ListAlumnosPage {
private myColor = 'dark';
private colors = ['dark', 'falta', 'retraso'];
private cont = 0;
constructor(public navCtrl: NavController, public navParams: NavParams)
{
}
ionViewDidLoad() {
//console.log('ionViewDidLoad ListAlumnosPage');
}
falta(){
console.log();
this.cont++;
this.cont=(this.cont%this.colors.length)
this.myColor = this.colors[this.cont];
console.log(this.myColor);
}
}