Ion-toggle 2-way databinding not showing correct state on load

Ionic Framework ionic-v3
1

ion-toggle always shows false state on page load, then will toggle to the ngModel databinding value.
Where as if the checked property is bound without ngModel, then the status is shown correctly on load.

HTML

<ion-content padding>
  <ion-item>
    <ion-icon name="info" item-left></ion-icon>
    <ion-label>Toggle slide after load</ion-label>
    <ion-toggle [(ngModel)]="ngModelState" checked="{{checkedState}}"></ion-toggle>
  </ion-item>
  <ion-item>
    <ion-icon name="info" item-left></ion-icon>
    <ion-label>no binding</ion-label>
    <ion-toggle checked="{{checkedState}}"></ion-toggle>
  </ion-item>
</ion-content>

Typescript

 public ngModelState: boolean;
    public checkedState: boolean;

    constructor(public navCtrl: NavController) {
        this.ngModelState = true;
        this.checkedState = true;
    }

How do I get the 2-way data binding to load the view correctly?

toggle%20issue
toggle issue.gif545Ă—982 78.6 KB

2 
<ion-toggle [(ngModel)]="checkedState" disabled="true"></ion-toggle>
 If checkedState = true, the toggle is selected.
1 Like
3

Thanks Nagara. Yes, ngModel will enable the data binding.

My problem is that on first visit of the page. The toggle will always show false first, and then transition to the bound value.

If the data bound value is true, on the first visit of the page/view, the user will see the toggle as off, then toggles to on.

I would like to see the toggle reflect the data bound value on start

4

just realise the code was not showing. So have fixed my original post to show example code that demonstrates the issue.

The “Toggle slides after load” item, uses ngModel, and has the issue.
However, the “no binding” toggle uses one-way binding on checked state, and it shows the correct behaviour.

5

`` <ion-item>

<ion-label>checkedState</ion-label>

<ion-toggle [(ngModel)]=“checkedState”></ion-toggle>

</ion-item>
`` public checkedState: boolean; // checkedState = true;

constructor(public navCtrl: NavController) {
    this.checkedState = true; // to initialize
}

I am not sure what u need. When you need initialize variables u can use constructor or in init function.
When u load the page it will set true in the above example.
image

6

With your code, when you first load the page, was the toggle in the off state?

7

no it will be true(ON) if u want it to be off then do this change in constructor this.checkedState = false;

8

so my problem, is that it is showing as off first, and automatically slide to on.

9

Is this a requirement?
to change the state after some time.

10

To be clear. I want is to show on as soon as the user sees it. But with checkedState = true. It shows as off first, then shows on.

11

No. It is the bug, i am seeing.

12

No dude . I used this It works fine for me.

13

Like 0.5 second. Visible change.
Only on first load

14

Sorry but I tested now also. I am not getting any delay. But Y r u using ion-toggle two times?

15

Thanks for your input nagara.

I was experiencing this issue in my app, but with alot of other complex things happening, I decided to create a test project.
The code in my initial post is from the test project. I created a new ionic v3 project from the cli - using the tab template. In the about.html, I added the basic code to see if I can duplicate my issue on a clean project.

I have two ion-toggle in my example to test if ion-toggle has an issue, and then was able to reproduce in my environment that the ngModel causes my issue.

16

Just found these links.


Seems like it is currently a known issue.

18

Hello,
I have the same problem, did you find a solution ?
The checked thing doesn’t work for me…

19

Unfortunately not yet.

If you discover a fix/work around, I would appreciate it if you can share it here.