title: Angular2: Loading components dynamically from a service response
body: <p>I'm aware this is not the best solution but I would like to be able to load components dynamically from a JSON response, something along these lines:</p>
  
  <h2>app.component</h2>
  
  <pre><code>@Component({
      selector: 'my-app',
      template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt; {{component.title}} {{component.selector}}',
      providers: [AppService],
      directives: [ExampleComponent]
  })
  export class AppComponent implements OnInit {
  
      component:{};
  
      constructor(
          private _appService: AppService) {
      }
  
      ngOnInit() {
          this.component = this._appService.getComponent();
      }
  }
  </code></pre>
  
  <h2>app.service</h2>
  
  <pre><code>@Injectable()
  export class AppService {
  
      component = {
          title: 'Example component',
          selector: '&lt;example&gt;&lt;/example&gt;'
      }
  
      getComponent() {
          return this.component;
      }
  }
  </code></pre>
  
  <h2>example.component</h2>
  
  <pre><code>@Component({
      selector: 'example',
      template: 'This a example component'
  })
  export class ExampleComponent  {
  }
  </code></pre>
  
  <p>If I run this example, my output is <code>&lt;example&gt;&lt;/example&gt;</code> but it doesn't actually render the component. Also I've tried to use <code>[innerHtml]="component.selector"</code>, but that also didn't work. Does anyone have an idea or suggestion?</p>