javascript - How to reference an element using @ViewChild/@ContentChild when transcluded -

i following this cookbook on how create components dynamically @ run time. works splendidly, long element trying reference using @viewchild not transcluded (aka content projection in angular 2) in element.

let me elaborate. have code:

@component({     selector: 'module-landing',     templateurl: './module-landing.template.html',     entrycomponents: [travelheadercontentcomponent]  })  export class modulelandingcomponent implements afterviewinit {      @viewchild(contenthostdirective) contenthost: contenthostdirective;       ngafterviewinit() {          console.log(this.contenthost);      }  } 

my module-landing.template.html looks this:

<some-other-component></some-other-component> <ng-template content-host></ng-template> 

so far, good. console.log() outputs object expected.

however, need transclude content-host element within some-other-component, this:

<some-other-component>     <ng-template content-host></ng-template> </some-other-component> 

this falls over. @viewchild() reference undefined. changing @viewchild() @contentchild() has no effect.

how can this?