title: Angular 2+ Create ViewRef from Markup Injected into Dynamic Template
body: <p>I would like to create a ViewRef from markup that is dynamically inserted into a template. Is this possible based on the following code sample?</p>
  
  <p><strong>template.html</strong>:</p>
  
  <pre><code>&lt;ng-container *ngTemplateOutlet="dynamic; context: cntx"&gt;&lt;/ng-container&gt;
  &lt;ng-template #dynamic&gt;
    &lt;div [innerHTML]="markup"&gt;&lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Injected markup from API call to bind to div's innerHTML attribute:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="forViewRef"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>component.ts</strong>:</p>
  
  <pre><code>@ContentChild('#forViewRef', { read: ViewContainerRef }): someHndl;
  private _nativeElem: any;
  
  constructor(
      private sanitizer: DomSanitizer, 
      private _vcRef: ViewContainerRef, 
      private _resolver: ComponentFactoryResolver) {
      // to ensure template has been created, #dynamic
      this._nativeElem = this._vcRef.element.nativeElement;
  }
  
  // listen to lifecycle hook
  ngAfterContentChecked() {
      if (this._nativeElem !== undefined)
          // childContent ref is undefined
          console.log(this.someHndl);
          // markup is in the DOM
          console.log(this._nativeElem.querySelectorAll('#forViewRef'));
  }
  </code></pre>