Event bubbling

When Angular attaches event handlers to standard HTML element events, the event propagation works in the same way as standard DOM event propagation works. This is also called event bubbling. Events on child elements are propagated upwards, and hence event binding is also possible on a parent element, as follows:

<div id="parent " (click)="doWork($event)"> Try 
  <div id="child ">me!</div> 
</div> 

Clicking on either of the divs results in the invocation of the doWork function on the parent div. Moreover, $event.target contains the reference to the div that dispatched the event.

Event bubbling stops if the expression assigned to the target evaluates to a falsey value (such as void, false). Therefore, to continue propagation, the expression should evaluate to true:

<div id="parent" (click)="doWork($event) || true"> 

Here too, the $event object deserves some special attention.