How to bind click event to whole component (aka :host)?
<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>