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

Answer 1

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"