Búsqueda de sitios web

javascript - Cambiar o evento de clic de mat-button-toggle

Tengo un mat-button-toggle-group que tiene 5 mat-button-toggle. Necesito disparar un evento al hacer clic o al cambiar el valor, aunque prefiero que sea un evento de clic.

La documentación proporcionada aquí muestra que no hay un evento de clic, pero sí hay un evento de cambio.

También he probado el evento change (como se muestra a continuación), pero el evento no se está activando.

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

En mi archivo .ts

import {MatButtonToggleModule} from '@angular/material/button-toggle';

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

¿Cómo activar la función de cambio anterior?

Respuesta #1

debería ser :

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>

componente:

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

revisa este stackblitz funcionando

Respuesta #2

Una solución más fácil para obtener un evento de cambio en todo el mat-button-toggle-group es establecer un evento de cambio en el grupo, en lugar de en cada botón de alternancia.

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

Ahora puedes escuchar el evento en tu componente:

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

Funcionó para mí.

Artículos relacionados