1

If i click the button it will change the color in to orange but by requirement is after click the same button it need to change into default color. so please guid me to do this.

  <button #val1 class="mat-raised-button" [ngClass]="{'orange': val1.value==current_product_size}" (click)="sizeFilter(val1.value)" value="375ML">375ML</button>

Component.ts

sizeFilter(size_clicked) {
    this.current_product_size = size_clicked
}
Sudhar San
  • 39
  • 1
  • 11
  • P.S. You're supposed to use the `mat-raised-button` attribute instead of the class. This is to apply the appropriate ripple. (Unless if you don't want the ripple - use the `disableRipple` attribute)' – Edric Nov 30 '18 at 11:03

2 Answers2

2
**You can give more than one ngClasses if you want like this** 


<button #val1 class="mat-raised-button" 
[ngClass]="{'toggleColor': toggleColor,'orange': val1.value==current_product_size}" 
(click)="sizeFilter(val1.value)" 
value="375ML">375ML</button>

Component

toggleColor = false;
sizeFilter(size_clicked) {
this.toggleColor = !this.toggleColor;
this.current_product_size = size_clicked
}

CSS

.toggleColor{
  background: yourDefaultColor !important;
}
Kiran Hundal
  • 36
  • 3
0

Your html:

 <button #val1 class="mat-raised-button" [ngClass]="{'orange': isOrange}" (click)="setOrange()">375ML</button>

Your component:

isOrange = false;

setOrange() {
    isOrange = !isOrange;
}
benshabatnoam
  • 7,161
  • 1
  • 31
  • 52