CODEWITHSUNDEEP
angularangular2-template
Slip
Slip

Reputation: 949

How does ngSwitch work in Angular2?

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

enter image description here

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

Upvotes: 28

Views: 72688

Answers (4)

Aakash
Aakash

Reputation: 23737

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.

Upvotes: 13

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

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

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

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

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

Upvotes: 31

micronyks
micronyks

Reputation: 55443

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

Upvotes: 37

Christopher Whitehead
Christopher Whitehead

Reputation: 159

There is also *ngSwitchDefault which I didn't see in documentation over on site. Just like the name implies it will default to this if it doesn't meet the other cases.

This is mainly a heads up if someone runs into this.

Upvotes: 5

Related Questions