Angular4 / Child element not firing parent (click) event

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