Why click function triggers twice for custom component in Angular 2

Question

My custom component click function is triggered twice - both custom component's event and sample level event are triggered.

Here's my Plunker:

https://plnkr.co/edit/wp2iWh7OStdPm5uXsWbP?p=preview

Answer 1

Because you have bound it twice on the child component and on the parent component. The mouseEvent propagates from the child component to the parent component by default. You can stop propagation of event to parent component.

Template:

<div (click)="divClick($event)">Custom Div Clcik here!</div>

Class:

divClick(event) {
    event.stopPropagation();
    alert("divClick");
}