Using ion-toggle to open a new page is bugging

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 ?


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?

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()”

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


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.

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:

Upgrading to ionic-angular 3.6.0 fixed this issue !