title: Angular 2 dynamically create components in ngFor
body: <p>My controller has a list of components I want to have inside a page. Those other components are created and work correctly in isolation.</p>
  
  <p>In my HTML template:</p>
  
  <pre><code>&lt;ng-container *ngFor="let component of components"&gt;
      &lt;div {{component.name}}&gt;&lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>The code should output a <code>&lt;div&gt;</code> like this:</p>
  
  <pre><code>&lt;div my-component&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But it is not and I am getting this error:</p>
  
  <pre><code>DOMException: Failed to execute 'setAttribute' on 'Element'
  </code></pre>
  
  <p>It works well if I simply print the value inside the div tag:</p>
  
  <pre><code>&lt;div&gt;{{component.name}}&lt;/div&gt;
  </code></pre>
  
  <p>Is it even possible to achieve what I want?</p>