Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
<p>I have a question regarding dynamic component creation in Angular 2 rc5.</p>

<p>So let's assume that we have two plain angular components:</p>

<pre><code>  @Component({
      template: `
        &lt;div id="container"&gt;
          &lt;h1&gt;My Component&lt;/h1&gt;
        &lt;/div&gt;
       `,
      selector: 'my-app'
  })
  export class AppComponent { }

  @Component({
      template: '&lt;p&gt;{{text}}&lt;/p&gt;',
      selector: 'simple-cmp'
  })
  export class SimpleComponent { public text='Hello World!' }
</code></pre>

<p>Then some external non-angular chunck of code modificates a DOM:</p>

<pre><code>let newNode = document.createElement('div');
newNode.id = 'placeholder';
document.getElementById('container').appendChild(newNode);
</code></pre>

<p>Here is some presumable tree after manipulations: </p>

<pre><code> &lt;div id="container"&gt;
      &lt;h1&gt;My Component&lt;/h1&gt;
      &lt;div id="placeholder"&gt;&lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>So what I'm trying to do is just dynamically add SimpleComoponent instance into #placeholder div. How can I achieve this result? </p>

<p>I've been trying using ComponentFactory.createComponent(injector, [], newNode), it added the component though, but neither life cycle hooks nor binding not worked at all. </p>

<p>I believe there is some way to implement this using ViewContainerRef, but how can I link it with dynamically created node?</p>

<p>Here is the result I expect</p>

<pre><code> &lt;div id="container"&gt;
      &lt;h1&gt;My Component&lt;/h1&gt;
      &lt;div id="placeholder"&gt;
        &lt;simple-cmp&gt;Hello world!&lt;/simple-cmp&gt;
      &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>Thanks!</p>