Custom template rendering with *ngFor
<p>I have a History component which holds an array of <code>HistoryEntries</code>.</p>

<p><code>HistoryComponent</code> looks like:</p>

<pre><code> @Component({
 selector: 'history',
 template: `
    &lt;div&gt;         
       &lt;historyEntry *ngFor='let entry of historyentries'&gt;&lt;/historyEntry&gt;
    &lt;/div&gt; `,
    directives : [HistoryEntryComponent]
 })
</code></pre>

<p>The HistoryComponent-class looks like:</p>

<pre><code>export class HistoryComponent{
   public historyentries = [
                    new HistoryEntryComponent(1, "lalala"),
                    new HistoryEntryComponent(2, "xxxxx")
                    ];
}
</code></pre>

<p>Then I have a HistoryEntryComponent:</p>

<pre><code>@Component({
  selector: 'historyentry',
  template: `
    &lt;div&gt;
        &lt;h1&gt;ID: {{Id}} , Descr.: {{Description}}&lt;/h1&gt;
    &lt;/div&gt;
`
})
</code></pre>

<p>and a class:</p>

<pre><code>export class HistoryEntryComponent {
   constructor(public Id : Number, public Description : string)
   {}
}
</code></pre>

<p>If I render that, nothings shows up. I have already used a <code>&lt;li&gt;</code> to display the id and description, which works like expected. But of course <code>HistoryEntry</code> itself could get very complicated and need its own logic etc. So there must be a way to render <code>&lt;historyentry&gt;</code> as given by a template, isn't it?</p>

<p>In WPF I would say <code>HistoryEntry</code> is a <code>UserControl</code> with its own <code>ViewModel</code> attached.</p>