title: Angular2: Creating child components programmatically
body: <h2>Question</h2>
  
  <p>How to create child components inside a parent component and display them in the view afterwards using <em>Angular2</em>? How to make sure the injectables are injected correctly into the child components?</p>
  
  <h2>Example</h2>
  
  <pre><code>import {Component, View, bootstrap} from 'angular2/angular2';
  import {ChildComponent} from './ChildComponent';
  
  @Component({
      selector: 'parent'
  })
  @View({
    template: `
      &lt;div&gt;
        &lt;h1&gt;the children:&lt;/h1&gt;
        &lt;!-- ??? three child views shall be inserted here ??? --&gt;
      &lt;/div&gt;`,
    directives: [ChildComponent]
  })
  class ParentComponent {
  
          children: ChildComponent[];
  
          constructor() {
              // when creating the children, their constructors
              // shall still be called with the injectables.
              // E.g. constructor(childName:string, additionalInjectable:SomeInjectable)
              children.push(new ChildComponent("Child A"));
              children.push(new ChildComponent("Child B"));
              children.push(new ChildComponent("Child C"));
              // How to create the components correctly?
          }
  }
  bootstrap(ParentComponent);
  </code></pre>
  
  <h2>Edit</h2>
  
  <p>I found the <code>DynamicComponentLoader</code> in the <a href="https://angular.io/docs/js/latest/api/annotations/ComponentAnnotation-class.html">API docs preview</a>. But I get the following error when following the example: <em>There is no dynamic component directive at element 0</em></p>