Hi,
I implemented a toggle switch in a segment as follow:
<ion-menu [content]="content" side="left" id="menuParameter">
<ion-header>
<ion-toolbar color="default">
<ion-segment [(ngModel)]="menu">
<ion-segment-button value="segment1">
<ion-title>
Segment1 without toggle (initialization segment)
</ion-title>
</ion-segment-button>
<ion-segment-button value="segment2">
<ion-title>
Segment 2 with toggle switch
</ion-title>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<div [ngSwitch]="menu">
<ion-list *ngSwitchCase="'segment1'">
By default here we are
</ion-list>
<ion-list *ngSwitchCase="'segment2'">
<!--impossible to bind because by default i am not in segment 2 but in segment 1, so the toggle switch is not set with true value-->
<ion-item>
<ion-label>There will be cake</ion-label>
<ion-label> {{isToggledd}} </ion-label>
<ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
here is my controller :
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
export class AppComponent {
rootPage:any = HomePage;
public isToggled: boolean;
public menu: string = 'segment1'; /*show segment1 by default*/
constructor(
public platform: Platform,
public statusBar: StatusBar) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
});
this.isToggled = true; /*toggle Switch set as TRUE*/
public notify() {
console.log("Toggled: "+ this.isToggled);
}
So doing this I expect in my SEGMENT2 to have this behaviour
but the behaviour i get is the following :
BUT surprisingly, if a move the toggle switch into the segment 1, the toggle behaviour is ok :
Note the Toggle value is always "true".
any help ?