Salut tout le monde,

Je développe une petite application en Angular avec Material.

J'utilise un MatButtonToggleGroup pour sa simplicité d'utilisation que je customise. Je m'explique.

Pour chaque MatButtonToggle, je souhaite leur ajouter un Button qui permet de supprimer le MatButtonToggle.

Lorsque je clique sur ce bouton, le clique du MatButtonToggle s'active également alors que j'aimerai que seul le clique sur le bouton se fasse et donc que la sélection du MatButtonToggle ne s'effectue pas.

Mon code HTML :

<mat-button-toggle-group [formControl]="dataCtrl" [vertical]="true" multiple>
  <mat-button-toggle 
    *ngFor="let data of datas$ | async" 
    [value]="data.id" 
    (click)="onSelectDatas()"
  >
    {{ data.name }}
    <button 
      mat-icon-button 
      aria-label="Example icon button with a vertical three dot icon" 
      (click)="onDeleteData(data.id)"
    >
      <mat-icon>block</mat-icon>
    </button>
  </mat-button-toggle>
</mat-button-toggle-group>

Avez-vous des suggestions ?

Merci pour votre aide :)