title: Access template reference inside a template element
body: <p>I'm using a library that expects me to specify body of a directive as a child of <code>template</code> element</p>
  
  <pre><code>&lt;template customDirective&gt;
     &lt;custom-element #lookup&gt;&lt;/custom-element&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Is there a way to access <code>custom-element#lookup</code> inside my component.</p>
  
  <p>For eg.,</p>
  
  <pre><code>@Component({
    selector: 'app-test',
    template: `
      &lt;template customDirective&gt;
         &lt;custom-element #lookup&gt;&lt;/custom-element&gt;
      &lt;/template&gt;
    `
  })
  export class TestComponent {
    @ViewChild('lookup') viewChildRef;
    @ContentChild('lookup') contentChildRef;
  
    constructor() {
    }
  
    ngAfterContentInit(): void {
       console.log(this.viewChildRef); // &lt;-- undefined
       console.log(this.contentChildRef); // &lt;-- undefined
    }
  }
  </code></pre>
  
  <p>I'm getting <code>undefined</code> in both cases.</p>