title: How to handle events on child element in angular2 Component
body: <p>Suppose I have a component which has several very small child elements in it.
  If it were a small number of child elements I could have separated them out into their own components, but due to large number of small child elements I doubt this is the right way to do it, as I would end up creating several separate components.</p>
  
  <p>So I am not sure how I go about them.</p>
  
  <p>Thanks</p>
  
  <p><strong>Edit</strong></p>
  
  <pre><code>&lt;div&gt; &lt;!-- main component --&gt;
  &lt;div&gt;Content&lt;/div&gt;
  &lt;span&gt;Delete&lt;/span&gt;
  &lt;span&gt;Like&lt;/span&gt;
  &lt;span&gt;dislike&lt;/span&gt;
  &lt;span&gt;report&lt;/span&gt;
  &lt;span&gt;Edit&lt;/span&gt;
  &lt;span&gt;Share&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have something like the code above and the text can very well represent what actions can be performed on any mouse event.</p>