Change color of an ionic button 2

Question

Change color of an ionic button 2

Navigation

#1 by (1 votes)

1

I am trying to change the color of a button when it is clicked, I have managed to change all the buttons but I can not get it to only change the one I 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);
   }

   }

typescript angularjs angularjs-2.0 ionic2

asked by Jose Yeste 12.06.2017 в 23:23

source

1 answer

Custom Wordpress content [closed] Modify String

score 1 · Answer 1

Since there are several buttons, the only thing that should be changed is that the variable myColor instead of just being a string, should be an array of strings (one string for each color).

I ask you to look this plunker to see a way to do it.

In this plunker, I change the variable myColor to be an array of colors, and I update the falta() method so that it receives the index of the button that was clicked (in order to change the color of just that button).

@Component({...})
export class HomePage {

   public myColor = ['dark', 'dark', 'dark', 'dark', 'dark'];
   public colors = ['dark', 'falta', 'retraso'];
   public cont = 0;

  constructor() {}

  falta(index: number){
    this.cont++;
    this.cont=(this.cont%this.colors.length)
    this.myColor[index] = this.colors[this.cont];
   }

}

Then in the view, I assigned to each button the string within the variable myColor that corresponds to it and I add the index as a parameter when calling the function falta(...) :

<ion-content padding>

  <button #button1 [color]="myColor[0]" ion-button outline round class="text-on-bottom" (click)="falta(0)">
    <p>Jose Yeste</p>
  </button>
  <button #button2 [color]="myColor[1]" ion-button outline round class="text-on-bottom" (click)="falta(1)">
    <p>Name</p>
  </button>
  <button #button3 [color]="myColor[2]" ion-button  outline round class="text-on-bottom" (click)="falta(2)">
    <p>Namme</p>
  </button>
  <button #button4 [color]="myColor[3]" ion-button  outline round class="text-on-bottom" (click)="falta(3)">
    <p>AName</p>
  </button>
  <button #button5 [color]="myColor[4]" ion-button  outline round class="text-on-bottom" (click)="falta(4)">
    <p>Name</p>
  </button>

</ion-content>