Question

How to create child components inside a parent component and display them in the view afterwards using Angular2? How to make sure the injectables are injected correctly into the child components?

Example

import {Component, View, bootstrap} from 'angular2/angular2';

import {ChildComponent} from './ChildComponent';



@Component({

    selector: 'parent'

})

@View({

  template: `

    <div>

      <h1>the children:</h1>

      <!-- ??? three child views shall be inserted here ??? -->

    </div>`,

  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);

Edit

I found the DynamicComponentLoader in the API docs preview. But I get the following error when following the example: There is no dynamic component directive at element 0