Old way

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>

ANGULAR.2.0.0 OR Final Relase

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

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.