CODEWITHSUNDEEP
angularangular-material
Mohammed Ajmal
Mohammed Ajmal

Reputation: 590

Angular material button-toggle-group

I have a button toggle group. The functionality is that when I click a particular item, the background color should be changed. When I toggle one of the buttons, the newly selected button's color should change and the old one should return back to the default background color. Here is my code:

HTML

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical >
  <mat-button-toggle value="bold" (click)="changeColor()" mat-button-toggle [style.background-color]="color">Bold</mat-button-toggle>
  <mat-button-toggle value="italic" (click)="changeColor()" mat-button-toggle [style.background-color]="color">Italic</mat-button-toggle>
  <mat-button-toggle value="underline"(click)="changeColor()" mat-button-toggle [style.background-color]="color">Underline</mat-button-toggle>
</mat-button-toggle-group>

TypeScript

export class ButtonToggleOverviewExample {
  color:string;

  changeColor(){ 
    this.color='green';
  }

}

The problem is that once a button is toggled it remains in the same color as clicked one.

Upvotes: 2

Views: 5935

Answers (1)

Akj
Akj

Reputation: 7231

Try something like this:

DEMO

in style.css

.mat-button-toggle-checked{
  background-color: green;
}

Upvotes: 4

Related Questions