ngSwitchCase in angular 2 instead of ngSwitchWhen

Question

I was using ngSwitchWhen & now I want to use ngSwitchCase, I referred to the syntax here https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html & did the same in my application. There aren't any errors but it isn't working fine either. Somehow the plunker available in the above link for the example provided uses ngSwitchWhen. Here's my sub.component.ts:

@Component({
    selector: 'subjects',
    templateUrl: 'app/subjects.component.html' ,
    styleUrls: ['app/app.component.css'],
    directives:[MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ProfileDetailsComponent,ROUTER_DIRECTIVES],
     providers:[MdIconRegistry]
})

export class SubjectsComponent{
    viewMode='first';
    view='one';
    stateNext: boolean = false;

  private buttonState: boolean = true;

  private classes1 = [{label: 'English', state: false},{label:  'Hindi', state: false},{label:  'Mathematics', state: false},{label:  'Science', state: false},{label:  'Computer Science', state: false},{label:  'Social science', state: false},{label:  'Environmental Studies', state: false}];
  private classes6 = [{label: 'English', state: false},{label:  'Hindi', state: false},{label:  'Mathematics', state: false}];
  private classes9 = [{label: 'English', state: false},{label:  'Hindi', state: false},{label:  'Mathematics', state: false}];
  private classes11 =[{label: 'English', state: false},{label:  'Hindi', state: false},{label:  'Mathematics', state: false}];
  private classes12 =  [{label:  'Sanskrit', state: false},{label: 'Accounts', state: false},{label:  'Biology', state: false}];



  setButtonState() {
    let counter = 0;
    for(let i=0;i<this.classes1.length;i++) {
          if (this.classes1[i].state === true) {
             counter++;
          }}

      if (counter >= 1) { this.buttonState = false; }
      else {this.buttonState = true;}
  }
    setButtonState1() {
    let counter = 0;
    for(let i=0;i<this.classes6.length;i++) {
          if (this.classes6[i].state === true) {
             counter++;
          }}

      if (counter >= 1) { this.buttonState = false; }
      else {this.buttonState = true;}
  }
    setButtonState2() {
    let counter = 0;
    for(let i=0;i<this.classes9.length;i++) {
          if (this.classes9[i].state === true) {
             counter++;
          }}

      if (counter >= 1) { this.buttonState = false; }
      else {this.buttonState = true;}
  }
    setButtonState3() {
    let counter = 0;
    for(let i=0;i<this.classes11.length;i++) {
          if (this.classes11[i].state === true) {
             counter++;
          }}

      if (counter >= 1) { this.buttonState = false; }
      else {this.buttonState = true;}
  }
}

Here's my sub.compnent.html:

<div style="margin-top:16px;">
    <div class="scroll">
<ul style="list-style: none;">
                <li style="margin-left:-50px;" ><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:4px; border-top: 4px solid #5171C3;" (click)="view='one'">
                    <h5  class="class">Class 1 to 5</h5>
                </md-card></li>

                <li style="margin-left:-50px;"><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #2EA83B;" (click)="view='two'">
                  <h5 class="class">Class 6 to 8</h5>
                </md-card></li>

                <li style="margin-left:-50px;" ><md-card class="new" style="height:60px;width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #BDB235;" (click)="view='three'">
                    <h5 class="class">Class 9 to 10</h5>
                </md-card></li>

                <li style="margin-left:-50px;" ><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #DE660F;" (click)="view='four'">
                    <h5 class="class">Class 11 to 12</h5>
                </md-card></li>
</ul>
</div>

    <div [ngSwitch]="view" >


        <template [ngSwitchCase]="two">
             <md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
            <div style="background-color:#2EA83B;height:124px;width:243px;"></div>
            <div style="padding-top:36px;"> <label *ngFor="let cb of  classes6" style="font-size:14px;padding-left:12px;">
 <input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState1()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
            </md-card>
        </template>

        <template [ngSwitchCase]="three">
            <md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
            <div style="background-color:#BDB235;height:124px;width:243px;"></div>
            <div style="padding-top:36px;"> <label *ngFor="let cb of  classes9" style="font-size:14px;padding-left:12px;">
 <input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState2()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
            </md-card>
        </template>

        <template [ngSwitchCase]="four">
            <md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
            <div style="background-color:#DE660F;height:124px;width:243px;"></div>
            <div style="padding-top:0px;">
            <table style="margin-top: -38px;">
                <tr>
                    <td style="padding-top:54px;">
                        <label *ngFor="let cb of  classes11" style="font-size:14px;padding-left:6px;">
 <input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState3()" class="checkbox" checked/>{{cb.label}}<br/>
</label></td>
                    <td style="padding-left:10px;padding-top:54px;">
                        <label *ngFor="let cb of  classes12" style="font-size:14px;padding-left:6px;">
 <input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState3()" class="checkbox" checked/>{{cb.label}}<br/>
</label>
                    </td>
                </tr>
            </table>
            </div>
            </md-card>
        </template>

                <template ngSwitchDefault="one">
            <md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
        <div style="background-color:#5171C3;height:124px;width:243px;"></div>
         <div style="padding-top:36px;">   <label *ngFor="let cb of  classes1" style="font-size:14px;padding-left:12px;">
 <input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
            </md-card>
        </template>
    </div>

</div>

No matter which ever option I click, I am getting the html of ngSwitchDefault

@GünterZöchbauer I hope you're asking for this "angular-cli": "^1.0.0-beta.6" — Himanshi Gupta
– Himanshi Gupta, Commented Jul 19, 2016 at 11:38
I don't know how angular-cli versions are related to Angular2 versions. For me the Angular2 version would be interesting. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 19, 2016 at 11:40
How do I find the angular2 version...? I tried angular.version & angular.version.full on console, didn't help — Himanshi Gupta
– Himanshi Gupta, Commented Jul 19, 2016 at 11:44

Günter Zöchbauer · Accepted Answer · 2016-07-19 12:04:05Z

5

I guess what you want is

<template ngSwitchCase="four">

instead of <template [ngSwitchCase]="four">

or alternatively

<template [ngSwitchCase]="'four'">

This code

<template [ngSwitchCase]="four">

looks up the value of the property four but I assume what you want is the string "four"

answered Jul 19, 2016 at 12:04

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Himanshi Gupta Over a year ago

Thanks a lot again, <template ngSwitchCase="four"> is working fine! :D Even I was using <template [ngSwitchWhen]="'two'"> with ngSwitchWhen, it somehow didn't work right with ngSwitchCase(may have been some other error)

Himanshi Gupta Over a year ago

When the page loads initially there's no card on the right side & I want the content of the first card on the right side even after putting it in ngSwitchdefault I dont get it, any idea why ?

Günter Zöchbauer Over a year ago

Actually I can't make any sense of your comments. Have you checked my answer? Is four a property or a string?

Himanshi Gupta Over a year ago

It is a string, & I want the content of view="one" to be present when nothing is clicked or selected

Günter Zöchbauer Over a year ago

Sorry, no idea. If it works in the Plunker then the code is probably correct. Maybe some timing issue? Do you have async calls in your app that you don't have in Plunker? I can't open the Plunker right now, there seems to be an issue with the Plunker site.

|

Collectives™ on Stack Overflow

ngSwitchCase in angular 2 instead of ngSwitchWhen

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related