List of different components in Angular 2 ngFor
<p>I know there are many similar questions and almost all of them end with DynamicComponentLoader answer but still, I think use case described below is so simple and common (IMO) that solution with Angular 2 should be straight forward.</p>
<h1>Sample use case</h1>
<p>I have an array of news items with property <code>type</code> describing what kind of item it is.</p>
<pre><code>var items = [
  { id: 1, type: 'text', data: {} },
  { id: 2, type: 'text', data: {} },
  { id: 3, type: 'text-two-columns', data: {} },
  { id: 4, type: 'image-text', data: {} },
  { id: 5, type: 'image', data: {} },
  { id: 6, type: 'twitter', data: {} },
  { id: 7, type: 'text', data: {} }
]
</code></pre>
<p>Each different type has different <code>view</code> and quite different logic behind it. In other words - each <code>type</code> has its own angular2 <code>Component</code>.</p>
<p>So abstract code what I try to achieve is:</p>
<pre><code>&lt;div *ngFor=&quot;let item of items&quot;&gt;
   &lt;item-{{item.type}} [data]=&quot;item.data&quot;&gt;&lt;/item-{{item.type}}&gt;
&lt;/div&gt;
</code></pre>
<p>Of course it will not work.</p>
<h2>Possible solution #1</h2>
<pre><code>&lt;div *ngFor=&quot;let item of items&quot;&gt;
   &lt;item-text *ngIf=&quot;item.type === 'text'&quot; [data]=&quot;item.data&quot;&gt;&lt;/item-text&gt;
   &lt;item-image *ngIf=&quot;item.type === 'image'&quot; [data]=&quot;item.data&quot;&gt;&lt;/item-image&gt;
   ...
&lt;/div&gt;
</code></pre>
<p>I don't like this solution not only because it looks ugly and I will have to include this line every time I'll add new type but I wonder if this solution is good from performance perspective? I mean if I have 10,000 different types and only 3 items to display. So angular2 will have to remove from DOM 9,999 tags and leave only one for each of 3 items (3 * 9999 remove operations).</p>
<h2>Possible solution #2</h2>
<pre><code>&lt;div *ngFor=&quot;let item of items&quot;&gt;
   &lt;dynamic-component-loader [item]=&quot;item&quot;&gt;&lt;/dynamic-component-loader&gt;
&lt;/div&gt;
</code></pre>
<p>At the moment I don't remember how exactly <code>DynamicComponentLoader</code> works (I have tried it in similar problem in angular2 alpha long time ago). But as I remember the code looks like <code>hack</code> for me.. For such common task?..</p>
<h2>Angular 1.x thinking</h2>
<p>I don't know what I do wrong, maybe the problem is that I still think in <code>Angular 1</code>? Using it I would use <code>ngInclude</code> or custom directive with template function.</p>
<p>Guys, do you have other solutions how to do it? Don't stick to my two potential solutions, maybe I need to think out of the box and solve this problem completely in different part of my application.. I'm confused. Thanks:)</p>
<h2>EDIT: One more real world example</h2>
<p>Let's say your task is to write Facebook with Angular 2. I think you would face same issue trying to display news feed. Each news feed item has it's type (<code>text</code>, <code>event</code>, <code>ads</code>,.. )</p>