title: How to place a dynamic component in a container
body: <p>I want to create dynamic components and insert views of these components to a container.</p>
  
  <p>I think this can be achieved by <a href="https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html" rel="noreferrer">ViewContainerRef</a>.</p>
  
  <p>But I don't know, can we get <code>ViewContainerRef</code> of any component? if yes then how?.
  I am new to Angular, if there are any other good solutions available to handle this scenario, please suggest me.</p>
  
  <p><strong>Updated</strong>
  I think, I am pretty much near to the solution. Below is the code.</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {ContainerComponet} from './container.component'
  
  @Component({
      selector: 'my-app',
      template: `
      &lt;container&gt; &lt;/container&gt;
      `,
      directives: [ContainerComponet]
  })
  export class AppComponent {
  
      constructor() { }
  
   }
  </code></pre>
  
  <p>container.component.ts</p>
  
  <pre><code>import {Component, ComponentResolver, ViewContainerRef} from '@angular/core'
  import {controlBoxComponent as controlBox} from './controlBox.component';
  
  @Component({
      selector: 'container',
      template: 'container'    
  })
  export class ContainerComponet {
      constructor(viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
  
          this._cr.resolveComponent(controlBox)
              .then(cmpFactory =&gt; {
                  const ctxInjector = viewContainer.injector;
                  return viewContainer.createComponent(cmpFactory, 0,  ctxInjector);
              })
  
      }
  }
  </code></pre>
  
  <p>controlBox.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core'
  @Component({
      selector: 'controlBox',
      template: 'controlBox'
  })
  export class controlBoxComponent {
      constructor() { }
  }
  </code></pre>
  
  <p>Output</p>
  
  <pre><code>&lt;my-app&gt;
      &lt;container&gt;container&lt;/container&gt;&lt;controlbox _ngcontent-lsn-3=""&gt;controlBox&lt;/controlbox&gt;
  &lt;/my-app&gt;
  </code></pre>
  
  <p>Expected Result</p>
  
  <pre><code>&lt;my-app&gt;
      &lt;container&gt;container
      &lt;controlbox _ngcontent-lsn-3=""&gt;controlBox&lt;/controlbox&gt;
      &lt;/container&gt;
  &lt;/my-app&gt;
  </code></pre>