CODEWITHSUNDEEP
angulartypescriptgoogle-material-icons
raghavginfocus
raghavginfocus

Reputation: 343

Disable button event when embedded mat icon is clicked

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.

Upvotes: 1

Views: 3741

Answers (1)

Prashant Pimpale
Prashant Pimpale

Reputation: 10707

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

Upvotes: 2

Related Questions