Impossible de bind toggleSwitch in a segment

@jeandemagny wrote:

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 ?

Posts: 1

Participants: 1

Read full topic