Vieja forma

cambió ng-switch a ngSwitch
cambió ng-switch-when a 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 O Versión final

Tenga en cuenta que las cosas han cambiado en la versión final, por lo que si está utilizando la versión final, consulte el siguiente ejemplo simple.

DEMO sencilla: 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 {}

actualizar

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

original

Las plantillas distinguen entre mayúsculas y minúsculas (desde beta.47 AFAIR). Los selectores de directivas (atributos) se cambiaron a camello. Por ejemplo, de ng-switch a ngSwitch .

Los nombres de las etiquetas todavía usan guiones para la compatibilidad con los componentes web. Por ejemplo <router-link> , <ng-content> .

Más detalles a 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>

Tres cosas a tener en cuenta ngSwitch , ngSwitchCase y ngSwitchDefault .

1. ngSwitch : establece el property value del model . Por ejemplo, viewMode , que es una propiedad en su componente.

2. ngSwitchCase : define qué representar cuando el value de la property se define en ngSwitchChanges . por ej. cuando viewMode = 'map'

3. ngSwitchDefault : define qué renderizar si el value no coincide. por ej. cuando viewMode=undefined . Se rendered el valor predeterminado.

Otro punto importante es que necesitamos configurar [ngSwitchCase] dentro de un elemento HTML <template></template> ; de lo contrario, no funcionará. Angular lo convertirá automáticamente en una etiqueta <div> .

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

Buena suerte.