Angular2: Insert a dynamic component as child of a container in the DOM
<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>