title: Angular2 - ViewChild from a Directive
body: <p>I have a component with the name <code>EasyBoxComponent</code>,
  and a <code>@Directive</code> with this <code>@Viewchild</code>:</p>
  <pre class="lang-js prettyprint-override"><code>@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;
  </code></pre>
  <p>I thought this was the correct syntax, but <code>this.myComponent</code> is always undefined.</p>
  <hr />
  <p>Here's the whole code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;my-easybox&gt;&lt;/my-easybox&gt;
  &lt;p myEasyBox data-href=&quot;URL&quot;&gt;My Directive&lt;/p&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import { Directive, AfterViewInit, HostListener, ContentChild } from '@angular/core';
  import { EasyBoxComponent } from '../_components/easybox.component';
  
  @Directive({
    selector: '[myEasyBox]'
  })
  export class EasyBoxDirective implements AfterViewInit {
  
    @ContentChild(EasyBoxComponent) myComponent: EasyBoxComponent;
    @ContentChild(EasyBoxComponent) allMyCustomDirectives;
  
    constructor() {
    }
  
    ngAfterViewInit() {
      console.log('ViewChild');
      console.log(this.myComponent);
    }
  
    @HostListener('click', ['$event'])
    onClick(e) {
      console.log(e);
      console.log(e.altKey);
      console.log(this.myComponent);
      console.log(this.allMyCustomDirectives);
    }
  }
  </code></pre>