javascript - Ändra eller klick-händelse för mat-button-toggle

Jag har en mat-button-toggle-group som har 5 mat-button-toggle. Jag behöver utlösa ett event vid klick eller vid ändring av värdet, även om jag föredrar att det är ett klick-event.

Dokumentationen som tillhandahålls här visar att det inte finns någon klickhändelse, men det finns en ändringshändelse.

Jag har också försökt med ändringshändelsen (som visas nedan), men händelsen utlöses inte.

 <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>

I min .ts-fil

import {MatButtonToggleModule} från '@angular/material/button-toggle';

onValChange(val: string) {
 this.selectedVal = val;
}

Hur utlöser man ovanstående ändringsfunktion?

Svar #1

det borde vara :

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>

komponent:

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

kolla detta fungerande stackblitz

Svar #2

En enklare lösning för att få en ändringshändelse på hela mat-button-toggle-gruppen är att sätta en ändringshändelse på gruppen, istället för på varje växlingsknapp.

<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>

Nu kan du lyssna på händelsen i din komponent:

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

Funkade för mig.

Relaterade artiklar