title: Dynamic components inside ngFor
body: <p>I am converting an angular 1 application to angular 2. I have the dynamic directives working in angular 1 in a ng-repeat. I went off of this plunker
  <a href="http://plnkr.co/edit/ET3LZhXBRjwIsbKVIwxm?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/ET3LZhXBRjwIsbKVIwxm?p=preview</a></p>
  
  <pre><code>&lt;tr ng-repeat="p in people"&gt;
       &lt;td dynamic-directive="p.dir" blah="p"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>from this question : <a href="https://stackoverflow.com/questions/23130430/angularjs-dynamic-directive-inside-ngrepeat">Angularjs dynamic directive inside ngrepeat</a></p>
  
  <p>Is it possible to do the basically the same thing with angular 2?
  My data model will tell me what component to use and what data to pass in to the component.</p>
  
  <p>Edit:
  So my use case is:
  My main page on my site can have 10 different widgets and each widget is a different component - currently a directive in angular 1. Each component needs different data. The components can be in any order depending on how the site admin adds them in the database. I get the data from an API. In the data structure, there is a one to many: component > data. I need to loop through the data and add the components dynamically based on the component name from the data set. The data structure looks something like this.</p>
  
  <pre><code>"Topics":[
           {
              "component":"header",
              "Slug":"fake-slug",
              "URL":"some-image"
           },
           {
              "component":"standardcontent",
              "Slug":"fake-slug",
              "URL":"some-image"
           },
           {
              "component":"playlist",
              "PlayLists":[
                 {
                    "CONPlaylistID":"22",
                    "description":"fake-description",
                    "image":"fake-image"
                 },
                 {
                   "CONPlaylistID":"22",
                    "description":"fake-description",
                    "image":"fake-image"
                 }
              ]
           }
     ]
  </code></pre>
  
  <p>Thanks in advance</p>