title: Change or click event of mat-button-toggle
body: <p>I have a mat-button-toggle-group which has 5 mat-button-toggle. I need to fire an event on the click or on the change of the val, although I prefer it be a click event.</p>
  
  <p>The documentation provided <a href="https://material.angular.io/components/button-toggle/api" rel="noreferrer">here</a> shows there is no click event, but there is a change event. </p>
  
  <p>I have tried the change event too (as shown below) , but the event is not getting triggered.</p>
  
  <pre><code> &lt;mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="rowAction"&gt;
    &lt;mat-button-toggle value="raw_swift_msg" (change)="onValChange(value)" matTooltip="View Message"&gt;
      &lt;i class="fa fa-eye" style="color:#455A64" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/mat-button-toggle&gt;
    &lt;mat-button-toggle value="message_comment" matTooltip="Message Comment"&gt;
      &lt;i class="fa fa-comments" style="color:#455A64" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/mat-button-toggle&gt;
    &lt;mat-button-toggle value="link_trade" hasAccess id="LinkMessagePopup" matTooltip="Link Message"&gt;
      &lt;i class="fa fa-link" style="color:#455A64" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/mat-button-toggle&gt;
    &lt;mat-button-toggle value="audit_trail" matTooltip="View Audit"&gt;
      &lt;i class="fa fa-history" style="color:#455A64" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/mat-button-toggle&gt;
     &lt;mat-button-toggle hasAccess id="MessagePopup" value="move_message" matTooltip="Move message"&gt;
      &lt;i class="fa fa-exchange" style="color:#455A64" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/mat-button-toggle&gt; 
    &lt;mat-button-toggle value="log" matTooltip="View log"&gt;
      &lt;i class="fa fa-book" style="color:#455A64" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/mat-button-toggle&gt;
  &lt;/mat-button-toggle-group&gt;
  </code></pre>
  
  <p>In My .ts file</p>
  
  <p>import {MatButtonToggleModule} from '@angular/material/button-toggle';</p>
  
  <pre><code>onValChange(val: string) {
   this.selectedVal = val;
  }   
  </code></pre>
  
  <p>How to trigger the above change function? </p>