title: Create templateRefs dynamically in Angular and retrieve them with ViewChildren
body: <p>I want to create some dynamic components inside another component, but not just once, many times. And that number is also dynamic.</p>
  
  <p>So I was using ComponentFactoryResolver to create the component and then ViewChild to inject that component dynamically. The problem, as I said, is that I need to do that in many places, so I'd need to use ViewChildren to retrieve all references and inject the component (with a certain input data).</p>
  
  <p>I've a plunker where I reduced the problem to what I need.
  I have a component which is passed an array of data and the type of the component to create.</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;my-parent [data]="rows" [inner]="component"&gt;
        &lt;/my-parent&gt;
      &lt;/div&gt;
    `
  })
  export class AppComponent { 
  
    rows = [
      { name: 'data1' },
      { name: 'data2' },
      { name: 'data3' },
      { name: 'data4' }
    ];
  
    component = ChildComponent;
  }
  </code></pre>
  
  <p>In my-parent, I display a table with one row for each element in the data received as parameter, but also, I want to display below each row, another row with a component of the type also passed as parameter.</p>
  
  <p>As an example, above all rows I'm doing this exact thing for one component, where I'm passing name='TOTAL'. So I use an <code>&lt;ng-container #entry&gt;</code> to retrieve the reference and inject the component.</p>
  
  <p>I try to the same for the dynamic refs and it does not work. I created a directive Host so that I can retrieve it with ViewChildren with an specific id, but then when I try to create the component dynamically, it does not work.</p>
  
  <p>This is the code</p>
  
  <pre><code>@Directive({
    selector: 'host'
  })
  export class Host {
    @Input() id: string;
  }
  
  @Component({
    selector: 'my-parent',
    template: `
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;my data header&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;ng-container #entry&gt;&lt;/ng-container&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;ng-container *ngFor="let d of data; let i = index;"&gt;
            &lt;tr&gt;
              &lt;td&gt;{{ d.name }}&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;host id="{{i}}"&gt;&lt;/host&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/ng-container&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    `
  })
  export class ParentComponent implements OnInit, AfterContentInit {
  
    @Input() data: any;
    @Input() inner: any;
  
    @ViewChildren(Host) hosts: QueryList&lt;Host&gt;;
    @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;
  
    constructor(private resolver: ComponentFactoryResolver) {}
  
    ngOnInit() {
    }
  
    ngAfterViewInit() {
      if (this.hosts) {
        const componentFactory = this.resolver.resolveComponentFactory(this.inner);
        this.hosts.forEach(host =&gt; {
          console.log(host);
          const component = host.createComponent(componentFactory);
          component.instance.name = host.id;
        });
      }
    }
  
    ngAfterContentInit() {
      const componentFactory = this.resolver.resolveComponentFactory(this.inner);
      const component = this.entry.createComponent(componentFactory);
      component.instance.name = 'TOTAL';
    }
  
  }
  </code></pre>
  
  <p>And here is the <a href="https://plnkr.co/edit/wYjEspbYPrW0nDYOusN8?p=preview" rel="noreferrer">plunker</a></p>
  
  <p>It seems the hosts elements that I retrieve can´t injected upon.
  Any ideas to fix it?</p>
  
  <p>Thanks.</p>