Impossible to bind toggleSwitch in a segment



I implemented a toggle switch in a segment as follow:

<ion-menu [content]="content" side="left" id="menuParameter">
        <ion-toolbar color="default">
            <ion-segment [(ngModel)]="menu">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
                <ion-segment-button value="segment1">
                        Segment1 without toggle (initialization segment)
                <ion-segment-button value="segment2">
                        Segment 2 with toggle switch 

        <div [ngSwitch]="menu">                        
        <ion-list *ngSwitchCase="'segment1'">
              By default here we are
        <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-label>There will be cake</ion-label>
                        <ion-label> {{isToggledd}} </ion-label>
                        <ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>

<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*/   

    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.

    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 ?


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 ?