How does ngSwitch work in Angular2?

update

See https://angular.io/api/common/NgSwitch

original

Templates are case sensitive (since beta.47 AFAIR). Directive (attribute) selectors were changed to camel case. For example from ng-switch to ngSwitch.

Tag names still use dashes for compatibility with web components. For example <router-link>, <ng-content>.

More details to ngSwitchCase

• https://angular.io/docs/ts/latest/api/common/index/NgSwitchCase-directive.html

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
</container-element>

• https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

• https://angular.io/docs/ts/latest/api/common/index/NgSwitchDefault-directive.html

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-other-element *ngSwitchDefault>...</some-other-element>
</container-element>

Three things to keep in mind ngSwitch, ngSwitchCase and ngSwitchDefault.

1. ngSwitch - set the property value of model. For example - viewMode, which is a property in your component.

2. ngSwitchCase - Defines what to render when the value of the property defined in ngSwitchChanges. For ex. when viewMode = 'map'

3. ngSwitchDefault - Defines what to render if the value doesn't match. For ex. when viewMode=undefined. The default will be rendered.

Another important point is that we need to set the [ngSwitchCase] within a <template></template> HTML element otherwise it will not work. Angularwill automatically convert it into a <div> tag.

    <div [ngSwitch]="'viewMode'">
      <template [ngSwitchCase]="'map'" ngSwitchDefault> 
         Map View Content...   
       </template>      
       <template [ngSwitchCase]="'list'"> 
          List View Content...
      </template>
    </div>

Good Luck.

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 {}