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

Show components code. Is this html and a toggleDropdown function are part of the same component? — Max Koretskyi
Yes, They are both in the same component. Sorry that i wasnt clear enough — ekclone

yurzui yurzui · Accepted Answer · 2017-07-01T05:05:44

Use $event.currentTarget instead of $event.target

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

Plunker Example

Angular4 / Child element not firing parent (click) event

1 Answers