web-dev-qa-db-fra.com

Changer ou cliquer sur l'événement de mat-button-toggle

J'ai un groupe-bouton-bascule qui a 5 boutons-bascule. J'ai besoin de déclencher un événement sur le clic ou sur le changement du val, bien que je préfère que ce soit un événement de clic.

La documentation fournie ici montre qu'il n'y a pas d'événement click, mais qu'il y a un événement change. 

J'ai également essayé l'événement de modification (comme indiqué ci-dessous), mais l'événement ne se déclenche pas.

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

Dans mon fichier .ts

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

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

Comment déclencher la fonction de changement ci-dessus? 

javascripthtmlangulartypescriptangular-material
2
prabhat gundepalli

cA devrait etre :

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>

composant:

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

vérifier ceci stackblitz de travail

3
Fateme Fazli

Tangentiellement liée, pour ceux qui utilisent fastclick pour supprimer le délai de 300 ms sur les vues Web mobiles, voici ce que je devais faire pour que l'événement change de <mat-button-toggle-group> se déclenche.

Explication: Il semble que dans un navigateur de bureau, le gestionnaire toggleIt du mat-button-toggle (conduisant au répartiteur change du groupe) écoute l'événement click du bouton, mais que le gestionnaire toggleIt écoute l'événement touchend du bouton. directement. Certaines vues Web mobiles ont un écouteur intégré sur tous les événements touchend qui attend 300 ms pour voir si l'utilisateur mobile clique sur un simple ou double clic, puis envoie l'événement approprié click ou dblclick. Fastclick interfère avec cela en écoutant également les événements touchend qu'il intercepte pour que la webview lente touchendHandler ne soit jamais appelée et distribue un événement immédiat en un seul clic. Cependant, dans notre cas, l'événement touchend intercepté n'appellera pas toggleIt. Donc, nous désactivons l'interception , ce qui ne gênera pas le temps nécessaire pour que toggleIt soit appelé (notre UX), car la visualisation Web ne fait que retarder le clickHandlers, pas le touchendHandler direct de mat-button-toggle.

en main.ts

import * as FastClick from 'fastclick';
FastClick['attach'](document.body); // tslint:disable-line:no-string-literal

dans myComponent.ts 

public ngAfterViewInit(): void {
  const collection = document.getElementsByClassName('mat-button-toggle-label-content');
  Array.from(collection).forEach((eachHandlingElement: Element) => {
    eachHandlingElement.classList.add('needsclick'); // deeper element
  });
}

dans myComponent.html

<mat-button-toggle-group [(ngModel)]="mySelectedTabIndex" (change)="applyMySearch()">
  <mat-button-toggle *ngFor="let eachTabTitle of myTabTitles; let eachTabIndex = index" [value]="eachTabIndex"
    [class.my-highlight]="eachTabIndex === mySelectedTabIndex" [disabled]="wantDisabled(eachTabIndex)">
    {{ eachTabTitle }}
  </mat-button-toggle>
</mat-button-toggle-group>

dans myComponent.css

mat-button-toggle {
  flex-grow: 1; /* widen visible area */
}
mat-button-toggle ::ng-deep .mat-button-toggle-label-content {
  width: stretch; /* widen clickable area */
}
mat-button-toggle-group  {
  width: 100%;
}
.my-highlight {
  color: red;
}
0
BeatriceThalo