CODEWITHSUNDEEP
javascripthtmlangularangular5
saran
saran

Reputation: 75

Parent & child elements click event handling in Angular5

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,

Upvotes: 1

Views: 54

Answers (1)

Pierre Mallet
Pierre Mallet

Reputation: 7221

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 
}

Upvotes: 3

Related Questions