Creating a generic list iterator in Angular 2
<p>I want to wrap a list of items, but I want the flexibility of supplying a unique template.</p>

<pre><code>&lt;list [items]="someItems"&gt;
    &lt;book-list-item&gt;&lt;!-- Books, cars, dogs, whatever --&gt;
    &lt;/book-list-item&gt;&lt;!-- This will contain a unique template --&gt;
&lt;/list&gt;
</code></pre>

<p><strong>ListItemComponent</strong></p>

<pre><code>import { Component, Input } from '@angular/core';

@Component({
    selector: 'list-item',
    template: `
        &lt;div *ngFor="let item of items"&gt;
            &lt;ng-content&gt;&lt;/ng-content&gt;&lt;!-- Whatever book-list-item contains --&gt;
        &lt;/div&gt;`
})
export class ListItemComponent {
    @Input() items: Array&lt;any&gt;;
}
</code></pre>

<p><strong>BookListItemComponent</strong></p>

<pre><code>import { Component } from '@angular/core';

@Component({
    selector: 'book-list-item',
    template: `
        &lt;div class="row"&gt;
            &lt;div class="col-xs-6"&gt;Books&lt;/div&gt;
            &lt;div class="col-xs-6"&gt;Rule&lt;/div&gt;
        &lt;/div&gt;`

})
export class BookListItemComponent {}
</code></pre>

<p>Obviously I'd be passing books as <em>items</em>, but this is just an example. I can get something similar to this working, but "Books Rule" only prints out in the last list-group-item (because Bootstrap). </p>

<p>I'm really looking to understand how to pass a generic component to parent component that will iterate over the generic component as an item in a list of items. Can someone point me in the right direction?</p>