Toggle triggers ionChange when opening page

Ionic Framework ionic-v3
1

I’m using toggles for my settings page and I’m using ionChange to do stuff every time the toggle is interacted with but every time the page opens and gets the values it toggles the settings to on and triggers ionChange.

Is there any way i can prevent this from happening unless the toggle is directly interacted with?

In settings.ts

constructor(...) {
    
    this.settings = {
      ...
      notificationSound: this.settingsData.getNotificationSound()
    };
}

updateNotificationSound() {
    this.settingsData.setAlarmRing(this.settings.notificationSound);
    this.notifData.setNotificationSound();
    
    // Cancel any existing notifications so that future notification sounds match the settings
    LocalNotifications.cancelAll();
    this.notifData.setNotification();
  }

In settings.html


    <ion-item>
      <ion-label>Play sound on notification</ion-label>
      <ion-toggle [(ngModel)]="settings.notificationSound" (ionChange)="updateNotificationSound()"></ion-toggle>
    </ion-item>
2

Perhaps you can use some of the techniques described in this thread.

3

Most of my forms get initialized asynchronously, so I assign a boolean like this.checkboxFormInitialized to be a gatekeeper at the start of ionChange – basically the event doesn’t proceed until after the form is fully defined, so the first change is the result of user interaction, and the boolean doesn’t become true until all Observables have emitted values and the form is fully set up. The technique looks very similar to what people are doing in the thread @rapropos linked.

1 Like
4

Thanks for the quick reply guys!

Unfortunately I’m fairly new to Ionic and Angular/Javascript, would you be able to give me a quick example so I could see how to implement it please?