Impossible to bind toggleSwitch in a segment


#1

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

Screenshot from 2017-11-19 18:33:15

but the behaviour i get is the following :

Screenshot from 2017-11-19 18:37:47

BUT surprisingly, if a move the toggle switch into the segment 1, the toggle behaviour is ok :

Screenshot from 2017-11-19 18:36:43


Note the Toggle value is always "true". 

any help ?

#2

Just a test i made. In my left side menu, I
implemented 3 toggles (true, false,false) are not initialized in my
segment 2. i switch the second toggle, and then the first toggle
switches to “true”. I have so (true, true, false). When i click on the
segment 1 and i come back to the segment 2, i have always (true, true,
false) values but every toggles are in off position. Very strange.

Does a ion-segment clicked re-initialize the value of toggles ?