title: Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
body: <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>