Si toco el ícono y arrastro el botón, entonces las funciones activadas por el ícono no deben iniciarse. ¿Que debo hacer?
<div> <button type="button" class="fixed-button wobble" [style.background]="changeColorService.defaultStyles.firstDesignBackgroundColor" [appMovable]="true"> <mat-icon [style.color]="changeColorService.defaultStyles.firstDesignFontColor" *ngIf="!(changeKagListIcon)" (click)="openKagListDialog()" matTooltip="KAG-Liste öffnen" [appMovable]="true">dvr</mat-icon> <mat-icon [style.color]="changeColorService.defaultStyles.firstDesignFontColor" *ngIf="changeKagListIcon" (click)="dialog.closeAll()" matTooltip="KAG-Liste schließen" [appMovable]="true">close</mat-icon> </button>No estoy muy seguro de lo que quiere decir, pero considere llamar a event.stopPropagation() .
<button (click)="specialFnc()"> <mat-icon (click)="$event.stopPropagation()"></mat-icon> </button>Si hace clic en el icono, no se llamará a specialFnc. Entonces, si le gusta este comportamiento, para el evento de arrastre, simplemente detenga la cadena de eventos en el punto deseado.
No sé qué directiva es [appMovable] , pero dentro del manejo de arrastre debe llamar a stopPropagation.
Javascript event.stopPropagation() ayudará a que el evento secundario burbujee en los eventos Onclick del elemento principal.
Ejemplo,
<button (onclick)="stopChildTrigger($event)"> <mat-icon><mat-icon> </button> stopChildTrigger(e){ e. stopPropagation(); }