Parent & child elements click event handling in Angular5

Question

In Angular5,

I have the code like below.

  <div (click)="abc()"> some content <button (click)="xyz()">Click</button> </div> 

Whenever I click on button,the two methods are calling.But i want to call a single method.it belongs to button click.

How to handle it in Angular5

Thanks,

Answer 1

You need to stop the propagation of the event in the xyz method:

thus in the template :

<div (click)="abc()">
    some content
    <button (click)="xyz($event)">Click</button>
</div>

In the component

xyz = function (event: Event) {
    event.stopPropagation();
    ... // rest of the stuff 
}