Изменение цвета кнопки в зависимости от условия в ngclass в Angular6

Question

Если я нажму кнопку, цвет изменится на оранжевый, но по требованию после нажатия той же кнопки его нужно изменить на цвет по умолчанию. поэтому, пожалуйста, наведите меня на это.

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

Answer 1

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

Составная часть

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

CSS

.toggleColor{
  background: yourDefaultColor !important;
}

Answer 2

Ваш HTML:

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

Ваш компонент:

isOrange = false;

setOrange() {
    isOrange = !isOrange;
}