Группа кнопок с угловым материалом

У меня есть группа переключения кнопок. Функциональность заключается в том, что когда я щелкаю определенный элемент, цвет фона должен изменяться. Когда я переключаю одну из кнопок, цвет новой выбранной кнопки должен измениться, а цвет старой должен вернуться к цвету фона по умолчанию. Вот мой код:

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>

Машинопись

export class ButtonToggleOverviewExample {
  color:string;

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

}

Проблема в том, что после переключения кнопка остается того же цвета, что и нажатая.