title: Load Angular2 components on the fly?
body: <p>we're trying to build a nice Angular 2 app here.</p>
  
  <p>We want to load a few components based on what we get back from a web service call.</p>
  
  <p>You get json back from the web service call in our <strong>base component</strong>.</p>
  
  <p>The json may look like this:</p>
  
  <pre><code>[{
          "textChunk": {
              "text": "Lorem ipsum dolor sit amet"
          }
      }, {
          "factsBox": {
              "heading": "Sample heading",
              "body": "&lt;p&gt;Lorem ipsum sample&lt;/p&gt;&lt;p&gt;More sample rows&lt;/p&gt;"
          }
      }, {
          "chart": {
              "type": "circle",
              "data": [30, 10, 50, 10]
          }
      }]
  </code></pre>
  
  <p>So, we get "textChunk", "factsBox", "chart" back and their respective data.</p>
  
  <p>Now in our <strong>base component's ngOnInit method</strong>, we want to somehow load/inject:</p>
  
  <ul>
  <li><strong>textChunk</strong> component</li>
  <li><strong>factsBox</strong> component</li>
  <li><strong>chart</strong> component</li>
  </ul>
  
  <p>with their respective templates (preferably html files or ASP.NET MVC area views) and give them a model (stored in an object model in our base component).</p>
  
  <p>Also, <strong>these items</strong> in the json array <strong>might appear multiple times at different positions</strong> - that's why we need to load them in the correct component on the fly.</p>
  
  <p>I've been looking into deprecated DynamicContentLoader, I've been looking at <a href="https://stackoverflow.com/a/38888009/448138">this thorough SO answer on dynamically loading components</a> and I've been looking at some other stuff. I try to understand the SO answer, but fail to do so.</p>
  
  <p>Can you point me in the right direction with base examples on how I can dynamically load my components and their templates?</p>
  
  <p>To give you slightly more insight, here's the our base component:</p>
  
  <pre><code>import { Component, Directive, Input, OnInit } from '@angular/core'
  import { ApiService } from './api.service';
  import { IApiItem } from './IApiItem';
  import { KeysPipe } from './KeysPipe';
  
  @Component({
      selector: 'sampleApi',
      templateUrl: 'app/templates/latest.html',
      providers: [ApiService]
  })
  export class ApiComponent implements OnInit {
      constructor(private apiService: ApiService) { } 
      model: IApiItem;
  
      ngOnInit() {
          this.get();
      }
  
      get() {
          this.apiService.getJson().subscribe(data =&gt; this.model = data);
      }
  }
  </code></pre>
  
  <p>Thanks!</p>