ng switch - ngSwitchCase in angular 2 instead of ngSwitchWhen -
i using ngswitchwhen & want use ngswitchcase, referred syntax here https://angular.io/docs/ts/latest/api/common/index/ngswitch-directive.html & did same in application. there aren't errors isn't working fine either. somehow plunker available in above link example provided uses ngswitchwhen. here's 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 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 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 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 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 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 ever option click, getting html of ngswitchdefault
i guess want is
<template ngswitchcase="four"> instead of <template [ngswitchcase]="four">
or alternatively
<template [ngswitchcase]="'four'"> this code
<template [ngswitchcase]="four"> looks value of property four assume want string "four"
Comments
Post a Comment