title: Capture event on ng-content in Angular 2
body: <p>I am going through <a href="https://scotch.io/tutorials/angular-2-transclusion-using-ng-content" rel="noreferrer">this tutorial</a> to comprehend angular 2's <code>ng-content</code>. I want to capture event which is triggered on <code>ng-content</code>. I have following component:</p>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      moduleId: module.id,
      selector: 'card',
      template: `
      &lt;ng-content (click)="onClick($event)"&gt;&lt;/ng-content&gt;
      `
  })
  export class CardComponent {
  
      onClick(){
          console.log('clicked');
      }
  }
  </code></pre>
  
  <p>Here, as you can see I am setting a listener to the <code>click</code> event. But for some reasons it is not triggering. It seems like the entire <code>ng-content</code> tag is replaced. So to capture the event currently I am doing this:</p>
  
  <pre class="lang-ts prettyprint-override"><code>template: `
      &lt;div (click)="onClick($event)"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
      `
  </code></pre>
  
  <p>Is there any better way to do this? cause I don't want to wrap my <code>ng-content</code> into a <code>div</code> to avoid styling issues. Thanks. <a href="https://plnkr.co/edit/J0JROxAzVVUf57EhX4aX?p=preview" rel="noreferrer">Plnkr</a></p>