title: Dynamically adding components in ngFor
body: <p>I have a "dashboard" that loads configured  elements.
  Dashboard template has this:</p>
  
  <pre><code>  &lt;div class="dash-container" [ngGrid]="gridConfig"&gt;
      &lt;div *ngFor="let box of boxes; let i = index"
         [(ngGridItem)]="box.config"
         (onItemChange)="updateItem(i, $event)"
         (onResize)="onResize(i, $event)"
         (onDrag)="onDrag(i, $event)"
         (onDragStop)="onDragStop(i,$event)"
         [ngClass]="box.class"
       &gt;
        &lt;div class="handle"&gt;&lt;h4&gt;{{box.title}}&lt;/h4&gt;&lt;/div&gt;
        &lt;div [innerHTML]= "box.content"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Now <code>&lt;div [innerHTML]= "box.content"&gt;&lt;/div&gt;</code> will not work because non standard elements get sanitised.
  Running latest Angular 2.4.6 (RC 6).</p>
  
  <p>I look at the examples i could find for dynamic components - but all i see is that they just add components to the current component - but i need them in a very specific divs like in the example above.</p>
  
  <p><code>ComponentFactoryResolver</code> is often used together with <code>@ViewChild</code>.
  But i can't just do this inside a loop:</p>
  
  <pre><code>ngAfterViewInit() {
      const dashWidgetsConf = this.widgetConfigs();
      for (var i = 0; i &lt; dashWidgetsConf.length; i++) {
        const conf = dashWidgetsConf[i];
  
        @ViewChild(conf.id, {read: ViewContainerRef}) var widgetTarget: ViewContainerRef;
  
        var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent);
        widgetTarget.createComponent(widgetComponent);
      }
    }
  </code></pre>
  
  <p>The @viewchild gives 'Decorators are not valid here'.
  How can i load components from a conf list (in a loop) and add them inside a specific div (divs got <code>#{{conf.id}}</code>) in my component?</p>