title: Angular4 / Child element not firing parent (click) event
body: <p>I have a dropdown function which should be called with a click on this div</p>
  
  <pre><code>&lt;div (click)="toggleDropdown($event)" data-id="userDropdown"&gt;
   Username &lt;i class="mdi mdi-chevron-down"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the click event is  not triggered when I click on the <code>&lt;i&gt;</code> element</p>
  
  <pre><code>toggleDropdown($event) {
      const id = $event.target;
      document.querySelector('[data-drop=' + id.getAttribute('data-id') + ']').classList.toggle('active');
  }
  </code></pre>
  
  <p>Anyway i can make it that the child click event to trigger the parent one?</p>
  
  <p><a href="https://plnkr.co/edit/ztk6P2kk9J50fXS3vZQE?p=preview" rel="noreferrer">Plnkr</a></p>