title: Access elementRef inside a ng-template contained in a directive
body: <p>In one of my component's html, we use some <code>&lt;ng-template&gt;</code> tags. </p>
  
  <p>Inside tags, we would like to define a reference to access the <code>nativeElement</code> of the div from a <code>@ViewChild</code>.</p>
  
  <p>The element Ref I want to recover is in tabset directive, within a ng-template of the sub directive p-datatable sub.</p>
  
  <p>Here is our component.html code (we use primeNG and ngx-bootstrap modules and tabs / datatable directives):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tabset #staticTabs&gt;
      &lt;tab&gt;
          &lt;ng-template tabHeading&gt;
              &lt;span class="hidden-sm-down"&gt;
                  Tab Header Text
              &lt;/span&gt;
          &lt;/ng-template&gt;          
          &lt;p-dataTable [value]="data"&gt;
              &lt;p-column field="id" header="Id"&gt;&lt;/p-column&gt;
              &lt;p-column field="context" header="Context"&gt;
                  &lt;ng-template let-context="rowData" pTemplate="body"&gt;
                      &lt;div class="container" #iWantThisElementNative&gt;&lt;/div&gt;
                  &lt;/ng-template&gt;
              &lt;/p-column&gt;
          &lt;/p-dataTable&gt;
      &lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  
  <p>And our component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class AppComponent implements OnInit, AfterViewInit {
    @ViewChild('iWantThisElementNative') iWantThisElementNative;
  
    ...
  
    ngAfterViewInit() {
      console.log(this.iWantThisElementNative.nativeElement);
    }
  }
  </code></pre>
  
  <p>And the error we encounter:</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): TypeError: Cannot read property
    'nativeElement' of undefined</p>
  </blockquote>
  
  <p>I tried to move the div with reference on top of tabset, and it works properly. I tried to move the div outside of ng-template and it works too.</p>
  
  <p><strong>How to access an elementRef which is placed inside custom directives, within <code>&lt;ng-template&gt;</code>?</strong></p>