Using ion-toggle to open a new page is bugging

Ionic Framework ionic-v3
1

Hello !

I’m using a ion-toggle to show a modal that ask for a code.

When I’m clicking on it, the page is loading properly, angular events are firing well.
But when I’m moving the ion-toggle by doing a left-to-right or right-to-left move, the page is loading but events like [class.fill]=“code.length > 0” or *ngIf="…" are not working.

Is there any workaround or a way to fix this ?

Thanks.

2

I would find this a surprising UI as a user. Toggle switches are for turning things on and off, not popping up modals. What happens if you use an ordinary button to pop the modal?

3

The goal is not to define how the application works, but why this thing is not working properly.

FYI : This is a security toggle in user configuration, you can enable / disable a code, but to disable it, you need to re-enter the code.

Ordinary button should work because (click) event works well.
(ngModelChange) and (ionChange) are not working when switching the ion-toggle, BUT it works when clicking on the ion-toggle.

The ion-toggle has a (ngModelChange)=“toggleCode()”

  toggleCode(){
    let modal = this.modalCtrl.create(CodePage);
    modal.onWillDismiss(() => {
      this.storageService.get('user', (user) => {
        this.code = !!user.code;
      });
    });
    modal.present();
  }

Thanks.

4

Fine. If you want to keep banging your head against it, go ahead. My suggestion is to switch from a toggle to an icon button that conditionally changes depending on the state of the underlying security setting (lock/unlock, for example). This button could pop your modal.

5

This could be a solution. I’ll try to reproduce the problem on a plunkr and submit a bug request.

Thanks @rapropos for replying :slight_smile:

6

Upgrading to ionic-angular 3.6.0 fixed this issue !