title: ng-switch in Angular2
body: <p>I am playing around with angular 2 (currently with version alpha 26). <code>ng-for</code> and <code>ng-if</code> for example are working fine. I do however have problems with <code>ng-switch</code>. I just can't get it to work, i.e. nothing is printed. It seems as if the whole template is ignored.</p>
  
  <p>This is the code from my component, which can also be found on <a href="https://github.com/PzYon/AngTwo/tree/master/app">github</a>:</p>
  
  
  
  <pre class="lang-typescript prettyprint-override"><code>import {Item} from "js/types/item";
  import {Component, View, NgFor, NgIf, NgSwitch} from "angular2/angular2";
  
  @Component({
      selector: "item-details",
      properties: [
          "item"
      ]
  })
  @View({
      template: `&lt;span&gt;You selected {{item.name}},&lt;/span&gt;
                 &lt;span [ng-switch]="item.name"&gt;
                   &lt;template [ng-switch-when]="'Bill'"&gt;
                     &lt;span&gt; who is often called Billy.&lt;/span&gt;
                   &lt;/template&gt;
                   &lt;template [ng-switch-when]="'Bob'"&gt;
                     &lt;span&gt; who is often called Bobby.&lt;/span&gt;
                   &lt;/template&gt;
                   &lt;template [ng-switch-default]"&gt;
                     &lt;span&gt;who has no nickname.&lt;/span&gt;
                   &lt;/template&gt;
                 &lt;/span&gt;
                 &lt;div *ng-if="item.subItems"&gt;
                   &lt;h2&gt;Sub items:&lt;/h2&gt;
                   &lt;ul&gt;
                     &lt;li *ng-for="#subItem of item.subItems"&gt;{{subItem.name}}&lt;/li&gt;
                   &lt;/ul&gt;
                 &lt;/div&gt;`,
      directives: [NgFor, NgIf, NgSwitch]
  })
  export class ItemDetailsComponent {
      item:Item;
  }
  </code></pre>
  
  <p>Basically it's a simple component into which I inject an item which has a <code>name</code> property. The <code>name</code> property really has a value, which I can see as the line <code>&lt;span&gt;You selected {{item.name}},&lt;/span&gt;</code> works fine.</p>
  
  <p>I don't know, why it doesn't work. From my understanding everything should be correct. I compared with the angular repo on github, the <a href="https://github.com/angular/angular/blob/master/modules/angular2/test/directives/ng_switch_spec.ts">unit tests</a>, etc.</p>
  
  <p>These are the things I checked and I believe are ok:</p>
  
  <ul>
  <li><code>NgSwitch</code> is imported and injected via <code>directives</code></li>
  <li>syntax is correct</li>
  <li><code>item</code> really is available (but maybe not in the context of <code>NgSwitch</code>?) </li>
  </ul>
  
  <p>Just to be really sure, I also tried something trivial like following template (switching over a hard-coded string or a number): </p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;span [ng-switch]="'foo'"&gt;
   &lt;template [ng-switch-when]="'foo'"&gt;
     &lt;span&gt; who is often called foo.&lt;/span&gt;
   &lt;/template&gt;
   &lt;template [ng-switch-when]="'bar'"&gt;
     &lt;span&gt; who is often called bar.&lt;/span&gt;
   &lt;/template&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>And this doesn't work either, so it must be something really basic which I am doing wrong.. I'm afraid I can't find any examples or code snippets on the internet. Any help would be appreciated, thanks in advance.</p>