CODEWITHSUNDEEP
angularionic-frameworkionic4
SGR
SGR

Reputation: 201

Change background color of buttons onclick

I have two buttons called YES and NO whose color(i,e background-color) is light like this:

enter image description here

When the user click YES

enter image description here

When the user click No

enter image description here

DEMO

while surfing i saw this question. Here they are changing only one button color on click. But for my requirement both the button color should change on click.

CODE

HTML

<ion-content padding>
  <ion-item lines="none">
  <ion-button class="btn-1" expand="full" color="light" >Yes</ion-button>
   <ion-button class="btn-2" expand="full"  color="light" >No</ion-button> 
  </ion-item>
</ion-content>

CSS

.btn-1{
width:45%;
float:left;
padding:0px 5px 0px 5px;
margin-bottom:20px;
}
.btn-2{
width:45%;
float:right;
padding:0px 5px 0px 5px;
margin-bottom:20px;
}

TS

 import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.css'],
})
export class HomePage {

}

Upvotes: 0

Views: 5072

Answers (4)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

Here you can try this code or follow this link stackblitz:

edit your template home.page.html

<ion-button (click)="activeNow('green')" class="btn-1" expand="full" [color]="(selectItem==='green')? 'success':'light'" >Yes</ion-button>
<ion-button (click)="activeNow('red')" class="btn-2" expand="full"  [color]="(selectItem==='red')? 'danger':'light'"  >No</ion-button>

And update the home.page.ts

selectItem:string='';
activeNow(item:string) {
  this.selectItem=item;
}

Upvotes: 1

Shifenis
Shifenis

Reputation: 1125

You can add a class on click with ngClass like this

<ion-content padding>
  <ion-item lines="none">
    <ion-button
      [ngClass]="yesButtonTriggered ? 'greenButton': 'light'"
      (click)="yesButton()"
      class="btn-1"
      expand="full"
      color="light"
    >Yes</ion-button>
    <ion-button
      [ngClass]="noButtonTriggered ? 'redButton': 'light'"
      (click)="noButton()"
      class="btn-2"
      expand="full"
      color="light"
    >No</ion-button>
  </ion-item>
</ion-content>

And in your TS

  yesButtonTriggered = false;
  noButtonTriggered = false;

  yesButton() {
    // do your stuff
    this.yesButtonTriggered = true;
    this.noButtonTriggered = false;
  }

  noButton() {
    // do your stuff
    this.noButtonTriggered = true;
    this.yesButtonTriggered = false;
  }

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

TS:

isYesClicked:boolean = false
isNoClicked:boolean = false

HTML:

<ion-button class="btn-1" expand="full" (click)="isYesClicked=true;isNoClicked=false" [color]="isYesClicked?'success':'light'"  >Yes</ion-button>


<ion-button class="btn-2" expand="full"  color="light" (click)="isYesClicked=false;isNoClicked=true" [color]="isNoClicked?'danger':'light'">No</ion-button>

Upvotes: 1

user4676340
user4676340

Reputation:

3 values means you can't use a boolean. But you can use a number : 

buttonValue = 0;

<ion-button class="btn-1" expand="full" [color]="buttonValue > 0 ? 'success' : 'light'" (click)="buttonValue = 1">Yes</ion-button>
<ion-button class="btn-2" expand="full" [color]="buttonValue < 0 ? 'danger' : 'light'" (click)="buttonValue = -1">No</ion-button>

Upvotes: 3

Related Questions