title: Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList
body: <p>I am building a dialog with dynamic tabs that can receive a component to be placed in the tab body. I am having a hard time creating multiple dynamic components using @ViewChildren. I have successfully done this with a single component and @ViewChild in the past quite easily.</p>
  
  <p><strong>Here is my template:</strong></p>
  
  <pre><code>&lt;mat-tab *ngFor="let tab of tabs" [label]="tab.label"&gt;
       &lt;ng-template #comp&gt;&lt;/ng-template&gt;
  &lt;/mat-tab&gt;
  </code></pre>
  
  <p><strong>Here is my component logic:</strong></p>
  
  <pre><code>@ViewChildren("comp") dynComponents: QueryList&lt;any&gt;;
  
  
  public ngAfterContentInit() {
    this.tabs.forEach(tab =&gt; {
       const factory = this._resolver.resolveComponentFactory(tab.component);
       console.log(this.dynComponents); // Returns undefined.
  
       // this.componentRef = this.vcRef.createComponent(factory);
    });
  }
  </code></pre>
  
  <p>My dynComponents are undefined even when hard-coding components in the Template. I need to seemingly get the ViewContainerRef from this dynComponents QueryList, but I am not sure why it is not populating at all. I used this post for reference: <a href="https://stackoverflow.com/a/40165639/8384588">Post</a></p>