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.
The documentation provided here shows there is no click event, but there is a change event.
I have tried the change event too (as shown below) , but the event is not getting triggered.
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="rowAction">
<mat-button-toggle value="raw_swift_msg" (change)="onValChange(value)" matTooltip="View Message">
<i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="message_comment" matTooltip="Message Comment">
<i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="link_trade" hasAccess id="LinkMessagePopup" matTooltip="Link Message">
<i class="fa fa-link" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="audit_trail" matTooltip="View Audit">
<i class="fa fa-history" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle hasAccess id="MessagePopup" value="move_message" matTooltip="Move message">
<i class="fa fa-exchange" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="log" matTooltip="View log">
<i class="fa fa-book" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
</mat-button-toggle-group>
In My .ts file
import {MatButtonToggleModule} from '@angular/material/button-toggle';
onValChange(val: string) {
this.selectedVal = val;
}
How to trigger the above change function?
Best Answer
it should be :
html:
component:
check this working stackblitz