Angular material button-toggle-group

Question

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.

No.All have same color. default color: white, on-click:green — Mohammed Ajmal
– Mohammed Ajmal, Commented Aug 24, 2018 at 5:45

Akj · Accepted Answer · 2018-08-24 05:46:41Z

4

Try something like this:

DEMO

in style.css

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

edited Aug 24, 2018 at 5:46

answered Aug 24, 2018 at 5:04

Akj

7,2513 gold badges31 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Angular material button-toggle-group

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related