Button color change based on condition in ngclass in Angular6

Question

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
}

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
– Edric, Commented Nov 30, 2018 at 11:03

Kiran Hundal · Accepted Answer · 2018-11-30 08:50:15Z

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

answered Nov 30, 2018 at 8:50

Kiran Hundal

363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

benshabatnoam · Accepted Answer · 2018-11-30 07:48:14Z

0

Your html:

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

Your component:

isOrange = false;

setOrange() {
    isOrange = !isOrange;
}

answered Nov 30, 2018 at 7:48

benshabatnoam

7,7403 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

Button color change based on condition in ngclass in Angular6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related