title: Angular2: Insert a dynamic component as child of a container in the DOM
body: <p>Is there a way to insert dynamically a component as a <strong>child</strong> (not a sibling) of a DOM tag in Angular 2?</p>
  
  <p>There are plenty of examples around there to insert a dynamic component as a sibling of a given <code>ViewContainerRef</code>'s tag, like (as of RC3):</p>
  
  <pre><code>@Component({
    selector: '...',
    template: '&lt;div #placeholder&gt;&lt;/div&gt;'
  })
  export class SomeComponent {
    @ViewChild('placeholder', {read: ViewContainerRef}) placeholder;
  
    constructor(private componentResolver: ComponentResolver) {}
  
    ngAfterViewInit() {
      this.componentResolver.resolveComponent(MyDynamicComponent).then((factory) =&gt; {
          this.componentRef = this.placeholder.createComponent(factory);
      });
    }
  }
  </code></pre>
  
  <p>But this generates a DOM similar to:</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  &lt;my-dynamic-component&gt;&lt;/my-dynamic-component&gt;
  </code></pre>
  
  <p><strong>Expected result:</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;my-dynamic-component&gt;&lt;/my-dynamic-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using the <code>SomeComponent</code>'s <code>ViewContainerRef</code> has the same result, it is still inserting the generated component as a sibling, not a child. I would be okay with a solution where the template is empty and dynamic components are inserted in the template (within the component selector tag).</p>
  
  <p>The DOM structure is very important when using libraries like ng2-dragula to drag from a list of dynamic components and <a href="https://github.com/valor-software/ng2-dragula#dragulamodel" rel="noreferrer">benefit from the model updates</a>. The extra div is in the list of draggable elements, but outside the model, breaking the drag &amp; drop logic.</p>
  
  <p>Some say it is not possible (<a href="https://stackoverflow.com/questions/37185820/how-to-place-a-dynamic-component-in-a-container#comment63149054_37201171">c.f. this comment</a>), but it sounds like a very surprising limitation.</p>