Access to a template template inside a template element

Question

I am using a library that expects me to specify the directive body as a child of the template element

 <template customDirective> <custom-element #lookup></custom-element> </template> 

Is there a way to access custom-element#lookup inside my component.

For instance,

 @Component({ selector: 'app-test', template: ` <template customDirective> <custom-element #lookup></custom-element> </template> ` }) export class TestComponent { @ViewChild('lookup') viewChildRef; @ContentChild('lookup') contentChildRef; constructor() { } ngAfterContentInit(): void { console.log(this.viewChildRef); // <-- undefined console.log(this.contentChildRef); // <-- undefined } } 

I get undefined in both cases.

Answer 1

You cannot get a link to a component inside a template until you create an inline view.

Try using setter like:

 @ViewChild('lookup') set lookUp(ref: any) { console.log(ref); } 

Plunger example

Answer 2

Try looking at lookedUpCustomElemRef inside the ngAfterViewInit callback.

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html