title: How to bind click event to whole component (aka :host)?
body: <p>I have a container component <code>ContainerComponent</code> containing some children, <code>ChildComponent</code>, spawned with <code>*ngFor</code>.</p>
  
  <p><code>ContainerComponent</code> template:</p>
  
  <pre><code>&lt;div class="child" *ngFor="let child of children"&gt;
      &lt;child [child]="child"&gt;&lt;/child&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>ChildComponent</code> template:</p>
  
  <pre><code>&lt;h2&gt;{{child.name}}&lt;/h2&gt;
  &lt;h2&gt;{{child.data}}&lt;/h2&gt;
  </code></pre>
  
  <p>For <code>ChildComponent</code>, I have a stylesheet defined, in which I can access whole component body using <code>:host</code> as described <a href="https://angular.io/docs/ts/latest/guide/component-styles.html" rel="noreferrer">here</a>.</p>
  
  <p>With this, I created style for <code>ChildComponent</code>:</p>
  
  <pre><code>:host
  {
      display: block;
  
      width: 400px;
      height: 300px;
  }
  </code></pre>
  
  <p>Now, I want to bind the <code>(click)</code> event on each <code>ChildComponent</code> (whole component) and catch it inside <code>ChildComponent</code> class. To do this, I have to set <code>(click)="method"</code> property on <em>something</em>.</p>
  
  <p>However, I don't have <code>:host</code>-like thing when talking about events.</p>
  
  <p>I don't want to bind in <code>ContainerComponent</code>.</p>
  
  <p>One possible solution is to wrap whole component in a <code>div</code> and bind event to this <code>div</code>, however I'm looking for a more elegant way.</p>