How does ngSwitch work in Angular2?

Question

I am trying to use ngSwitch as in this example but I get an error:

My Component:

  template: `
    <div layout="column" layout-align="center center">   
   <div [ng-switch]="value">
       <div *ng-switch-when="'init'">
     <button md-raised-button class="md-raised md-primary">User</button>
     <button md-raised-button class="md-raised md-primary">Non user</button>

     </div>
  <div *ng-switch-when="0">Second template</div>
  <div *ng-switch-when="1">Third Template</div>
</div>
  </div>`,
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
 })

My plunker - wizard.ts

What did I miss? Thank you

Answer 1

Old way

---

Working Demo. you can check browser's console

changed ng-switch to ngSwitch
changed ng-switch-when to ngSwitchWhen

<div layout="column" layout-align="center center">

       <div [ngSwitch]="value">
      <div *ngSwitchWhen="'init'">
         <button md-raised-button class="md-raised md-primary">User</button>
         <button md-raised-button class="md-raised md-primary">Non user</button>

      </div>
      <div *ngSwitchWhen="0">Second template</div>
      <div *ngSwitchWhen="1">Third Template</div>
    </div>
 </div>
   <button md-fab
 class="md-fab wizard_button--next"
  aria-label="about"
  (click)="onNext()">
<i class="material-icons" md-icon="">play_arrow</i>
 </button>

---

New Way

ANGULAR.2.0.0 OR Final Relase

---

UPDATE : How to Use ngSwitch in Angular2.0.0 or final release ???

Please note things have changed in final release so if you are using final release please go through below simple example.

Simple DEMO : http://plnkr.co/edit/IXmUm2Th5QGIRmTFBtQG?p=preview

@Component({
  selector: 'my-app',
  template: `
  <button (click)="value=1">select - 1</button>
  <button (click)="value=2">select - 2</button>
  <button (click)="value=3">select - 3</button>
  <h5>You selected : {{value}}</h5>

  <hr>
  <div [ngSwitch]="value">

     <div *ngSwitchCase="1">1. Template - <b>{{value}}</b> </div>
     <div *ngSwitchCase="2">2. Template - <b>{{value}}</b> </div>
     <div *ngSwitchCase="3">3. Template - <b>{{value}}</b> </div>
     <div *ngSwitchDefault>Default Template</div>

  </div>
  `,

})
export class AppComponent {}