title: Angular2 dynamically reference and create Component
body: <p>For example, I have a list of options in one Component, where clicking on one renders a Component dynamically based on the user's selection. This is how I image it would be done:</p>
  
  <p><strong>List Component</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
      selector: 'list-component',
      templateUrl: `
          &lt;ul&gt;
              &lt;li *ngFor="let item from list" (click)="onClick(item)"&gt;{{item.name}}&lt;/li&gt;
          &lt;/ul&gt;
      `
  })
  export class ListComponent {
  
      list = [
          {name: 'Component1'},
          {name: 'Component2'},
          {name: 'Component3'}
      ]
  
      constructor(private _listService: ListService) {
  
      }
  
      onClick(item) {
          this._listService.renderComponent(item);
      }
  }
  </code></pre>
  
  <p><strong>Render Component</strong></p>
  
  <pre><code>import { Component, ViewContainerRef } from '@angular/core';
  
  @Component({
      selector: 'render-component',
      templateUrl: `
          &lt;div #dynamicComponent&gt;&lt;/div&gt;
      `
  })
  export class RenderComponent {
  
      @ViewChild('dynamicComponent', { read: ViewContainerRef })
      private dynamicComponent: any;
  
      constructor(
          private _listService: ListService,
          private resolver: ComponentFactoryResolver
      ) {
  
          this._listService.onRenderComponent.subscribe(item =&gt; {
              let componentReference;
  
              //TODO: Get Component by reference ???
  
              let componentFactory = this.resolver.resolveComponentFactory(componentReference);
              this.dynamicComponent.createComponent(componentFactory);
  
          })
      }
  }
  </code></pre>
  
  <p>I've left the details about <code>ListService</code> but it is essentially a service that allows the two components to communicate.</p>
  
  <p>I would prefer not to have references to components inside ListComponent like so:</p>
  
  <pre><code>import {Component1, Component2, Component3} from './otherComponents';
  
  ...
  
  list = [
      {name: 'Component1', component: Component1},
      {name: 'Component2', component: Component2},
      {name: 'Component3', component: Component3}
  ]
  
  ...
  
  this._listService.onRenderComponent.subscribe(item =&gt; {
      let componentReference = item.component;
  
      let componentFactory = this.resolver.resolveComponentFactory(componentReference);
      this.dynamicComponent.createComponent(componentFactory);
  
  })
  </code></pre>
  
  <p>and let the ListService handle it.</p>
  
  <p>So essentially, does angular provide methods for retrieving a Component based on some references such as <code>selector</code>, <code>componentId</code> or something along those line?</p>