Angular4 / Child element does not fire parent (click) event

I have a dropdown menu function that needs to be called by clicking on this div

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

      

        
        
        
      

    

But the click event doesn't fire when I click the element <i>

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

      

        
        
        
      

    

Is there anyway I can make the child click event trigger the parent?

Plnkr