NgSwitch not running after migrate from 2.0.0-beta15 to 2.0.1

Hi , I 'm upgrading my code from beta15 to 2.0.1. I read first the Changelog and ngSwitch It seem to have only a breaking change "ngSwitchWhen "to “*ngSwitchCase”.

https://github.com/toni-moreno/snmpcollector/blob/angular2_final_migration/public/home/home.html

my final code is

   <p [ngSwitch]="item_type">
      <template *ngSwitchCase="snmpdevice">
        <h1>SNMP Devices</h1>
      </template>
      <template *ngSwitchCase="snmpmetrics">
      <h1> SNMP Metrics</h1>
      </template>
      <template *ngSwitchCase="ifluxmeas">
      <h1>measurents</h1>
      </template>
      <template *ngSwitchCase="metricgroup">
      <h1>metric Group</h1>
      </template>
      <template *ngSwitchDefault>DEFAULT</template>
    </p>

I’m submitting a … (check one with “x”)

[ X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior It is not seleccting any value , ignoring all html tags inside <p [ngSwitch]=“xxx”>

Expected behavior

depending on the variable xxx angular put data , sometimes "<h1>SNMP Devices</h1>" other "<h1>SNMP Metrics</h1>, etc.

Minimal reproduction of the problem with instructions

Download my repo https://github.com/toni-moreno/snmpcollector and switch to angular2_final_migration brach follow built instructions https://github.com/toni-moreno/snmpcollector/blob/master/README.md

When you connect to the server , http://localhost:8090/

What is the motivation / use case for changing the behavior?

Version Upgrade

Please tell us about your environment: OS: Debian Linux IDE: atom package manager : npm HTTP Server: self made in the package based in golang + macaron

• Angular version: 2.0.X 2.0.1 ( working fine in 2.0.0-beta15)
• Browser: Chrome
• Language: Typescript
• Node (for AoT issues): node --version = 6.2.1

[micronyks]

The problem is with - the way you use * and <template> together. Make sure, when you use * with any directive, you should not use <template> tag. And, when you want to use <template> tag, you should wrap directive within [ ].

more information can be found here : https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html#!#ngSwitch-anchor

So this code

<p [ngSwitch]="item_type">
      <template *ngSwitchCase="snmpdevice">
        <h1>SNMP Devices</h1>
      </template>
      ...
      ...
</p>

you should change it to,

<p [ngSwitch]="item_type">
      <template [ngSwitchCase]="'snmpdevice'">   ///<<<===also note " 'snmpdevice' "
        <h1>SNMP Devices</h1>
      </template>
      ...
      ...
</p>

play here : https://plnkr.co/edit/FkcQdB2FoV345L6F6oBZ?p=preview

If it solves your problem, please close this issue.

[kemsky]

See *ngSwitchCase="snmpdevice", in this line angular expects snmpdevice to be a variable, but you want a string constant.

Correct way: *ngSwitchCase="'snmpdevice'" notice single quotes.

I think NgSwitch documentation is not clear on this and thus confusing, * syntax is also confusing (no [] used).