title: Dynamic components at specified index not placed properly
body: <p>I am trying to show a simple list of items in Angular with a clickable div on the side; on user selection, the component should dynamically create a new component below the clicked one.</p>
  
  <p>For this purpose, i am using <code>ComponentFactoryResolver</code> with no relevant problems; however, using <code>ViewContainerRef</code> as parent, i can't find how to place the created components at a specified index, even if i specify it as a parameter in the <code>createComponent()</code> method.</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;h3&gt;Click on the arrow to create a component below the item clicked.&lt;/h3&gt;
  
  &lt;div #myContainer&gt;
    &lt;div *ngFor="let thing of things; let index = index"&gt;
      &lt;div class="inline click" (click)="thingSelected(thing, index)"&gt; &gt; &lt;/div&gt;
      &lt;div class="inline"&gt;{{thing.id}}&lt;/div&gt;
      &lt;div class="inline"&gt;{{thing.name}}&lt;/div&gt;
      &lt;div class="inline"&gt;{{thing.value}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>export class AppComponent  {  
    @ViewChild('myContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  
    things = [];
    constructor(private componentFactoryResolver: ComponentFactoryResolver){
      for(let i=0; i &lt; 10; i++)
        this.things.push({id: i, name: "thing" + i, value: 5 * i});    
    }
  
    thingSelected(thing: any, index: number){
      let component = this.container.createComponent(this.componentFactoryResolver.resolveComponentFactory(DetailComponent), index);
      component.instance.id = thing.id;    
    }
  }
  </code></pre>
  
  <p>I also created a <a href="https://stackblitz.com/edit/angular-gd796h?embed=1&amp;file=src/app/app.component.html" rel="noreferrer">stackblitz</a> sample to demostrate the issue: what i am missing or doing wrong?</p>
  
  <p>To clarify: </p>
  
  <ol>
  <li>I would like to reproduce something similar to <a href="https://www.primefaces.org/primeng/#/table/rowexpansion" rel="noreferrer">"RowExpand" functionality</a> in TurboTable of PrimeNg library.
  The user clicks a row, and a dynamic component is created <strong>at the position clicked</strong>.</li>
  <li>I don't know the type of component at runtime: that's why i want a dynamic component creation (<strong>so, specifying it in the html template it's not what i need</strong>)</li>
  </ol>