CODEWITHSUNDEEP
angulartypescriptionic2
Spilot
Spilot

Reputation: 1525

how do I change a button color on click in Ionic2?

I am testing this on the bluestacks android simulator and whatever natural responsiveness ionic buttons may have don't seem to be working. I want to make sure going forward that this button color changes on click. Do I do it with css or what? Ionic isn't clear on this.

This is my button 

<button ion-button block (click)="addEvent();">Add Event</button>

Upvotes: 1

Views: 26887

Answers (4)

PHILL BOOTH
PHILL BOOTH

Reputation: 91

<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;
    }

    }

Upvotes: 0

hvallenilla
hvallenilla

Reputation: 61

In my HTML I have this:

<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>

And in my component:

// 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'
   }
}

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

A more ionic way to do this, would be to use the color attribute like this:

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

    public ionicNamedColor: string = 'primary';

    constructor() {}

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

}

And in your view:

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

Please notice that the colors should be added to the named color variables from your variables.scss:

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

If you don't want to use your named color variables, then you can just change the background color of the button like this:

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

  public hexColor: string = '#000000';

    constructor() {}

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

}

And in your view:

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

Please take a look at both ways to do it in this plunker.

Upvotes: 2

Sanny Srivastava
Sanny Srivastava

Reputation: 1157

In your component.ts file:

declare a variable: 

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

Edit your HTML as:-

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

In your function do following changes:-

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

/*
YOUR FUNCTION CODE
*/

}

Upvotes: 13

Related Questions