title: Adding dynamic components in a NgFor
body: <p>I would like to create a component which takes another one in parameter, and generate a collection of instances of this component.</p>
  
  <p>(The objective in the end is to create a generic backoffice).</p>
  
  <p>For example, with something like that :</p>
  
  <pre><code>&lt;common-collection [component]="collectionDisplayComponent" [items]="items"&gt;&lt;/common-collection&gt;
  </code></pre>
  
  <p>I would get this (here the component is a loader for test purpose) :</p>
  
  <p><a href="https://i.stack.imgur.com/BtMGG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BtMGG.png" alt="enter image description here"></a></p>
  
  <p>So I already have something working (almost): Here the code of the component :</p>
  
  <pre><code>@Component({
    selector: 'common-collection',
    templateUrl: 'collection.component.html',
    styleUrls:  ['collection.component.css'],
    providers: [  ]
  
  })
  export class CollectionComponent implements AfterViewInit{
  
      constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
  
      @Input()
      set items(items: Array&lt;object&gt;){
        this._items = items;
        this.refresh();
      }
  
      private _items: Array&lt;object&gt; = [];screen
      @ViewChildren('componentRef', {read: ViewContainerRef}) public widgetTargets: QueryList&lt;ViewContainerRef&gt;
  
      public refresh() {
        let component = LoaderComponent; // Should be given in parameter, set manually for now
  
        if(typeof(this.widgetTargets) !== "undefined"){
  
          for (let i = 0; i &lt; this.widgetTargets.toArray().length; i++) {
              let target = this.widgetTargets.toArray()[i];
              let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component);
              let cmpRef: any = target.createComponent(widgetComponent);
  
  
          }
        }
      }
  
      ngAfterViewInit(): void {
        this.widgetTargets.changes.subscribe(() =&gt; {
          this.refresh()
        });
      }
  }
  </code></pre>
  
  <p>And the template code associated :</p>
  
  <pre><code>&lt;div id="div-container"&gt;
      &lt;div fxLayout="row" fxLayoutWrap fxLayoutGap="1%" fxFlexAlign="center center"&gt;
          &lt;div class="div-item-card" fxFlex="24"  *ngFor="let item of _items;"&gt;
              &lt;div #componentRef&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code works, but the problem is that I'm setting the viewChildren at the wrong time, because I have this error :</p>
  
  <p><a href="https://i.stack.imgur.com/XrJhJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XrJhJ.png" alt="enter image description here"></a></p>
  
  <p>I think I should fill the widgetTargets variable and do the ngFor on it instead of _items, but I don't find any example to add components directly in it.</p>
  
  <p>All the examples consist in creating "void" dom elements, and setting them with the component factory after that (which I do there and causes the error).</p>
  
  <p>Thanks a lot for your help.</p>
  
  <p><strong>EDIT</strong> : The "items" variable is set after the component init : it is loaded from an async call to a database in a parent component.</p>
  
  <p><strong>EDIT2</strong>
  Working with something like this in a refresh method.</p>
  
  <pre><code>for (let i = 0; i &lt; this.widgetTargets.toArray().length; i++) {
              let target = this.widgetTargets.toArray()[i];
              let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component);
              target.clear();
              let cmpRef: any = target.createComponent(widgetComponent);
              cmpRef.instance.value = this._items[i]["value"];
              this.cd.detectChanges();
          }
  </code></pre>