how to stop parent request if clicked child angular2

Question

I have similar code like below and I want If I clicked in Child Div then Parent Div click event should not trigger.

<div class="parentDiv" (click)="parentDiv()">
   <div class="childDiv" (click)="childDiv()">Child Container</div>
</div>

When I am clicking on "childDiv" so first it triggers "parentDiv()" event and then "childDiv()" event.

Can you please help me to resolve it?

Thankyou in advance

Answer 1

This is where you need event.stopPropagation();

<div class="childDiv" (click)="childDiv(event)">Child Container</div>

And

childDiv(event) {
 event.stopPropagation();
}

What happening in your case is called propagation of events.

When you click on child div, the click event propagates to parent div. You need to stop that propagation.

Above is the way to do it.

Or if you want a one line solution this it

<div class="childDiv"
 (click)="childDiv(event);$event.stopPropagation()" >Child Container</div>