Change or click event of mat-button-toggle

An easier solution to get a change event on the entire mat-button-toggle-group is to set a change event on the group, instead of each toggle button.

<mat-button-toggle-group (change)="onValChange($event.value)">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

Now you can listen to the event in your component:

onValChange(value) {
    console.log(value);
}

Worked for me.

it should be :

html:

 <mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="raw_swift_msg" (change)="onValChange($event.value)" matTooltip="View Message">
    <i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle (change)="onValChange($event.value)" value="message_comment" matTooltip="Message Comment" >
    <i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
</mat-button-toggle-group>

component:

onValChange(value){
     console.log(value)
}

check this working stackblitz