Disable button event when embedded mat icon is clicked

Question

I am having a mat-icon inside a button. Button is having an event defined and mat-icon is having another event defined. When I click on mat-icon, its event is fired along with button event as mat-icon is inside button tag. I don't want button event to be fired when mat-icon is clicked and don't want mat-icon to be fired when button is clicked excluding the mat-icon part in the UI. Here is a snippet of HTML in angular framework.

<button type="button" class="" (click)="someevent">
            <span >
              Text
            </span>
            <mat-icon  class='' (click)="differentevent">
                       delete
            </mat-icon>
</button>

How to resolve this? I am using Angular and click events are defined in typescript.

Does this answer your question? [Stop mouse event propagation](https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation) — Reactgular, Nov 28 '19 at 13:00

Prashant Pimpale · Accepted Answer · 2019-11-28T18:59:49.647

1

You can use $event.stopPropagation():

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Just replace mat-icon markup with:

<mat-icon (click)="$event.stopPropagation(); differentevent()">delete</mat-icon>

So when you click on delete icon it stops the event bubbling hence your parent click event will not called and then it calls the next method.

The order of stopPropagation() is not important - you can also use it as:

<mat-icon (click)="differentevent(); $event.stopPropagation()">delete</mat-icon>

Online_Demo

edited Nov 28 '19 at 18:59

answered Nov 28 '19 at 13:25

Prashant Pimpale

10,349
9
44
84

While this is working fine, I get in browser console - Cannot read property ‘stopPropagation’ of undefined. This breaks the functionality of my mat-icon. Also in terminal it displays set max event listeners. Some leaking is happening. – Raghav Gupta Nov 28 '19 at 16:11
Also I am getting Error- Uncaught (in promise) – Raghav Gupta Nov 28 '19 at 16:17
@RaghavGupta this might be cause of type check component.ts for this – Prashant Pimpale Nov 28 '19 at 16:32
1

Ok I commented stopPropagation in ts file as you did and only kept it in HTML. This resolves everything. – Raghav Gupta Nov 28 '19 at 16:50

Disable button event when embedded mat icon is clicked

1 Answers1