angular 2 dynamic components

Example of dynamic list with item template live example

You can generate list in 3 ways:

1. Simple ngFor for simple cases:

<div *ngFor="#item of items">
  Inline template item #: {{item}}
</div>

2. You can create a list component with inline template which can reuse list logic:

<dynamic-list [items]="items">
  <div template="#item">
      Inline template item #: {{item}}
  </div>
</dynamic-list> 

3. You can create a list component with item template component:

<dynamic-list [items]="items">
  <dynamic-list-item template="#item" [item]="item"></dynamic-list-item>
</dynamic-list> 

dynamic-list component src

dynamic-list-item component src

Thanks to AngularClass for great project template for ng2+webpack

For angular 2.1 see an issue