comment puis-je modifier la couleur d'un bouton sur cliquez dans Ionic2?

Je suis en train de tester cela sur le bluestacks android simulateur et naturels réactivité ionique boutons ont ne semblent pas être au travail. Je veux faire en sorte à l'avenir que ce bouton, les changements de couleur sur cliquez sur.
Dois-je le faire avec du css ou quoi? Ionique n'est pas clair sur ce point.

C'est mon bouton 

<button ion-button block (click)="addEvent();">Add Event</button>
InformationsquelleAutor Spilot | 2017-05-25
  1. 13

    Dans votre composant.ts fichier:

    déclarer une variable: 

    buttonColor: string = '#000'; //Default Color

    Modifier votre code HTML en tant que:-

    <button ion-button block (click)="addEvent();" [ngStyle]="{'background-color': buttonColor}">Add Event</button>

    Dans votre fonction de faire les changements suivants:-

    addEvent(){
this.buttonColor = '#345465'; //desired Color

/*
YOUR FUNCTION CODE
*/

}
    • Merci Sanny 🙂
    InformationsquelleAutor Sanny Srivastava
  2. 2

    Plus ionique façon de le faire, serait d'utiliser la attribut de couleur comme ceci:

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

    public ionicNamedColor: string = 'primary';

    constructor() {}

    public toggleNamedColor(): void {
      if(this.ionicNamedColor === 'primary') { 
        this.ionicNamedColor = 'secondary'
      } else {
        this.ionicNamedColor = 'primary'
      }
    }

}

    Et de votre point de vue:

    <button (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor">Click me!</button>

    Veuillez noter que les couleurs doivent être ajoutés à la couleur nommée variables à partir de votre variables.scss:

    $colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

    Si vous ne souhaitez pas utiliser votre nom d'une couleur variables, alors vous pouvez simplement changer la couleur de fond du bouton comme ceci:

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

  public hexColor: string = '#000000';

    constructor() {}

    public toggleBackgroundColor(): void {
      if(this.hexColor === '#000000') { 
        this.hexColor = '#dddddd'
      } else {
        this.hexColor = '#000000'
      }
    }

}

    Et de votre point de vue:

    <button (click)="toggleBackgroundColor()" ion-button [style.background-color]="hexColor">Click me!</button>

    Veuillez jeter un oeil à deux façons de le faire dans cette plunker.

    InformationsquelleAutor sebaferreras
  3. 1

    Dans mon HTML j'ai ceci:

    <ion-item class="text" *ngFor="let item of question.data.answers; let i = index;">
<button (click)="itemClicked(item, item, i, question.key, question.data)" [class.incorrect]="!item.correct && whatISelected == i" [ngStyle]="item.correct ? {'background-color': buttonColor } : null " > {{ item.answer }}</button>

    Et dans mon composant:

    //Declared before constructor component
selectedItem: string
whatISelected: string
buttonColor: string

itemClicked(item, answer, iSelect, key, question) {
   //keep selectedItem for each item
   this.hasAnswered = true;
   if ( answer.correct ) {
     this.selectedItem = answer.correct;
     this.buttonColor = '#32db64'
   } else {

     this.whatISelected = iSelect
     this.buttonColor = '#32db64'
   }
}
    InformationsquelleAutor hvallenilla
  4. 0
    <button *ngIf="this._var == true" (click)="this.itemClicked();" class="button1" >My Button 1</button>  

<button *ngIf="this._var == false" (click)="this.itemClicked();" class="button2" >My Button 2</button>


    public itemClicked(){

    if(this._var != false){
     this._var == false;
    }else{
     this._var == true;
    }

    }
    InformationsquelleAutor PHILL BOOTH