Angular2: loop dynamiccomponentloader to push each object in an array onto the dom?

Question

I'd like to roll an array of objects and use the properties from each index as input parameters of Angular2 components Id like to add to the dom

Bc these components are recursive, I need to use dynamiccomponentloader's function inside of a loop that traverses this array of objects (instead of *ngFor)

I am looking for an example that puts the component's template markup inside of a li (which is inside of a ul).

I am not certain how loadAsRoot, loadIntoLocation, or, loadNextToLocation can append a new li inside of a ul instead of just replacing its previous contents

I would be most grateful for a plnkr or fiddle to demonstrate this. Thank you in advance for your help

Answer 1

Plunker example beta.17
Plunker example beta.9

import {Component, DynamicComponentLoader, ElementRef, Input} from 'angular2/core'

@Component({
  selector: 'dyn-cmp',
  template: `
  <h2>Dynamic {{name}}</h2>
`
})
export class DynCmp {
  @Input() name:string;
}

@Component({
  selector: 'my-app',
  directives: [],
  template: `
  <h2>Hello {{name}}</h2>
  <div #target></div>
`
})
export class App {
  list = ['a', 'b', 'c'];
  constructor(private dcl:DynamicComponentLoader, private elRef:ElementRef) {
    this.name = 'Angular2';
  }  

  ngAfterViewInit() {
    this.list.forEach((val) => {
      this.dcl.loadIntoLocation(DynCmp, this.elRef, 'target')
      .then(cmpRef => cmpRef.instance.name = val);
    });
  }
}

You can't use loadAsRoot() because it removes the target and than can't be reused to add another component.