angular - Angular2 - ViewChild from a Directive -

i have component name easyboxcomponent, , directive viewchild

@viewchild(easyboxcomponent) mycomponent: easyboxcomponent; 

this.mycomponent undefined

i thought corrent syntax..

my html is

<my-easybox></my-easybox> <p myeasybox data-href="url">my directive</p> 

import { directive, afterviewinit, hostlistener, contentchild } '@angular/core';  import { easyboxcomponent } '../_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);      }    }

contentchild works aftercontentinit interface, template should like:

<p myeasybox data-href="url">     <my-easybox></my-easybox> </p> 

and directive:

@directive({   selector: '[myeasybox]' }) export class easyboxdirective implements aftercontentinit {   @contentchild(easyboxcomponent) mycomponent: easyboxcomponent;   @contentchild(easyboxcomponent) allmycustomdirectives;    ngaftercontentinit(): void {     console.log('ngaftercontentinit');     console.log(this.mycomponent);   }    constructor() {   }    @hostlistener('click', ['$event'])   onclick(e) {     console.log(e);     console.log(e.altkey);     console.log(this.mycomponent);     console.log(this.allmycustomdirectives);   } }