Angular4 / Child element not firing parent (click) event

Question

I have a dropdown function which should be called with a click on this div

<div (click)="toggleDropdown($event)" data-id="userDropdown">
 Username <i class="mdi mdi-chevron-down"></i>
</div>

But the click event is not triggered when I click on the <i> element

toggleDropdown($event) {
    const id = $event.target;
    document.querySelector('[data-drop=' + id.getAttribute('data-id') + ']').classList.toggle('active');
}

Anyway i can make it that the child click event to trigger the parent one?

Plnkr

Answer 1

Use $event.currentTarget instead of $event.target

This way you will get the element to which the event handler has been attached.

Plunker Example

Read more

• https://developer.mozilla.org/en/docs/Web/API/Event/currentTarget