Angular2 - ViewChild from a Directive

Question

I have a component with this name EasyBoxComponent, and a directive with this viewchild

@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;

this.myComponent is always undefined

I thought this is the corrent syntax..

My html is

<my-easybox></my-easybox>
<p myEasyBox data-href="URL">My Directive</p>

Answer 1

ContentChild works with AfterContentInit interface, so the template should be 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);
  }
}