title: Angular 2 Embed sub components in a View depending on a model
body: <p>How do I create a new Component(View) that contains other Components depending on a Model (written in dart)?</p>
  
  <p>Item (super class):</p>
  
  <pre><code>@Component(selector: 'item')
  @View(template: '&lt;div/&gt;')
  class Item {}
  </code></pre>
  
  <p>ImageItem &amp; ButtonItem (sub classes):</p>
  
  <pre><code>@Component(selector: 'image-item')
  @View(template: '''
    &lt;div&gt;
      &lt;img src="http://localhost:8082/images/test.png"/&gt;
    &lt;/div&gt;''')
  
  class ImageItem extends Item {
    String selector = 'image-item';
    ImageItem() : super() {}
  }
  
  @Component(selector: 'button-item')
  @View(template: '''
    &lt;div&gt;
      &lt;button type="button"/&gt;
    &lt;/div&gt;''')   
  class ButtonItem extends Item {
    String selector = 'button-item';
    ButtonItem() : super() {}
  }
  </code></pre>
  
  <p>Simple component/model that contains a list of components:</p>
  
  <pre><code>@Component(selector: 'app')
  @View(
  templateUrl: 'app.html',
  directives: const [Item, ImageItem, ButtonItem, NgFor, NgSwitch, NgSwitchDefault, NgSwitchWhen])
  class App {
    List&lt;Item&gt; items = [new ButtonItem(), new ImageItem(), new ImageItem()];
  }
  </code></pre>
  
  <p>Now I would like to create the app.html view depending on the items list. Is there a better solution then using NgSwitch?</p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
          &lt;li *ng-for="#item of items; #i = index" &gt;
              &lt;div [ng-switch]="item[i].selector"&gt;
               &lt;template ng-switch-when="button-item"&gt;
                   &lt;button-item&gt;{{item.selector}}&lt;/button-item&gt;
               &lt;/template&gt;
               &lt;template ng-switch-when="image-item"&gt;
                   &lt;image-item&gt;{{item.selector}}&lt;/image-item&gt;
               &lt;/template&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  --&gt; does not work, don't know why
  </code></pre>