Ion-toggle freezes app with ngModel and ionChange

Ionic Framework ionic-v3
1

Hello,

I am using the latest version of ionic 4.

I am trying to use ion-toggle in the following way:

    <ion-item>
        <ion-label>Test</ion-label>
      <ion-toggle color="warning" [(ngModel)]="testVar" (ionChange)="toggleEvent($event)"></ion-toggle>
    </ion-item>

When I launch the app (testing in chrome browser) with ionic serve if I try to toggle it will do the first one, but then the entire chrome brower tab running the app freezes up.

If I use the ngModel but remove the ionChange it works continually.

If I use ionChange and remove ngModel it works continually.

Both together do not work.

Any ideas?

Thanks

2

My idea would be to use only one or the other. I find it much easier to read, test, and debug programs the more clearly delineated lines of responsibility are drawn. Can you just add the code to modify testVar to toggleEvent() and then make the [ngModel] only an input binding?

3

You can use it and the following way, and it goes very well.
Change ionChange for ngModelChange

   <ion-item>
        <ion-label>Test</ion-label>
      <ion-toggle color="warning" [(ngModel)]="testVar" (ngModelChange)="toggleEvent($event)"></ion-toggle>
    </ion-item>
4

Thank you very much for the reply. That works great!

1 Like