title: ViewChild on html rendered as innerHtml
body: <p>I would like to access an element with ViewChild that is rendered with innerHtml, but in the lifecycle hook AfterViewInit, logging the element return undefined.</p>
  
  <p>Below is the code used:</p>
  
  <pre><code>import { Component, ViewChild, ChangeDetectorRef, AfterViewInit } from '@angular/core';
  
  @Component({
    template: `&lt;p [innerHTML]="'&lt;ng-template #innerHtmlNgTemplate&gt;&lt;/ng-template&gt;' | safeHtml"&gt;&lt;/p&gt;`
  })
  export class AppComponent {
    @ViewChild('innerHtmlNgTemplate') public innerHtmlNgTemplate;
  
    ngAfterViewInit() {
        console.log(this.innerHtmlNgTemplate); // undefined
    }
  }
  </code></pre>
  
  <p>The question is how can I access the <code>&lt;ng-template&gt;&lt;/ng-template&gt;</code> with ViewChild or in another way?</p>
  
  <p>Cheers</p>
  
  <p>EDIT:</p>
  
  <p>Here is a stackblitz showing the issue. <a href="https://stackblitz.com/edit/angular-k1xeh6?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-k1xeh6?file=src%2Fapp%2Fapp.component.ts</a></p>
  
  <p>EDIT2:</p>
  
  <p>In the stackblitz I sanitized the html, if this isn't done the ids are removed.</p>