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
