Ionchange event not firing when boolean changed from false to true

Ionic Framework ionic-v3
1

The change event does not fire when I change a boolean value from false to true after page load. The event fires if the change is from true to false. Any suggestions? Below is the code to replicate and environment info. Here is a plunker that shows the behavior. On the first toggle only one change event fires. But subsequent toggles fire two change events.


<ion-content>

  <ion-label>Initiate Toggle Both</ion-label>
  <ion-toggle (ionChange)="toggleBoth()" color="secondary"></ion-toggle>

  <ion-label>From true to false</ion-label>
  <ion-toggle [(ngModel)]="booleanFlag1" (ionChange)="toggleToFalse()" color="secondary"></ion-toggle>

  <ion-label>From false to true</ion-label>
  <ion-toggle [(ngModel)]="booleanFlag2" (ionChange)="toggleToTrue()" color="secondary"></ion-toggle>

</ion-content>

private booleanFlag1: boolean = true;
private booleanFlag2: boolean = false;

public toggleBoth(){
this.booleanFlag1 = ! this.booleanFlag1;
this.booleanFlag2 = ! this.booleanFlag2;
}

public toggleToFalse(){
console.log(‘Fired toggleToFalse()’);
}

public toggleToTrue(){
console.log(‘Fired toggleToTrue()’);
}

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 ios 4.3.1
Ionic Framework                 : ionic-angular 3.4.2

System:

Node       : v6.9.5
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13
2

Verify the name of your function on .ts file, change it to public toggleToTrue(), the same way it is called on the html (ionChange)="toggleToTrue()"

3

Great catch. I messed up the function name in the .ts file. I corrected it now but still, this is all I get in the console: “Fired toggleToFalse()”.

Here is the updated .ts file:

public toggleBoth(){
this.booleanFlag1 = false;
this.booleanFlag2 = true;
}

public toggleToFalse(){
console.log(‘Fired toggleToFalse()’);
}

public toggleToTrue(){
console.log(‘Fired toggleToTrue()’);
}

4

Because you only do that, you just make a console.log.

Try change the variable, like:

public toggleToFalse(){
   this.booleanFlag1 = false; // or you can try change the other variable, your choice
}

You have thousands of options, it depends on what you want to do. For example, make another function that change the status automatically

public changeStatus(){
   this.booleanFlag1 = !this.booleanFlag1; // or you can try change the other variable, you choise
}
5

Keep in mind this is just a basic example to demonstrate the problem I am having which is the event not firing when the boolean is changed from false to true. In this case when booleanFlag2 is updated from the initial value of false to true inside the toggleBoth() method. I am expecting the toggleToTrue() to fire but it does not. Hope this clarifies.

6

Sorry, but here it works normal.

image

image

7

A BIG thanks for trying. Glad it works for you. Could you send me the output of your “ionic info” command.

8

ordova CLI: 6.5.0
Ionic Framework Version: 3.3.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.10.0
Xcode version: Not installed

Hope it helps you.

2017-06-30 16:05 GMT-03:00 Reggierodriguesjr <
ionicframework@discoursemail.com>:

9

I would suggest not having both [(ngModel)] and (ionChange). There is too much possibility for them to be in conflict. Choose one or the other.

10

I did not understand the problem quite well, but I’ll try.

The first ion-toggle you trigger a function that doesn’t ever change. So if you executed once, you’ll get that this.booleanFlag1 = false; this.booleanFlag2 = true;

If you execute the function again, you’ll have the exact same lines of code, leaving this.booleanFlag1 = false; this.booleanFlag2 = true;

If you tap the second ion-toggle, you will notice that you are not changing it’s value, so it’ll remain the same. It will console.log () though.

11

The idea here is to perform the toggle only once on the first toggle button which calls the toggleBoth() method. This will change the value of the both boolean variables. booleanFlag1 will go from true to false and booleanFlag2 will go from false to true. Now we observe the change events firing by watching the console.log output. But in my case only the toggleToFalse fires. Hope this helps. Hugo was kind enough to try it but he did not experience the problem so I am suspecting I have a version issue to resolve.

12

Hello Raul, I created a plunker that hopefully helps show the problem more clearly. The first time you toggle the top button, only one change event fires. But subsequent toggles will fire two change events. You can find the plunker here and thank you for your interest in helping our: http://plnkr.co/edit/r3WsxzWDR0ssko4shkda?p=info

13

Now I get it. The names were very confusing for me. I understand the problem now and find it very annoying. I can’t find a way of making it work, besides:

export class HomePage {

  appName = 'Ionic App';
  private booleanFlag1: boolean = true;
  private booleanFlag2: boolean = false;
  i = 0;

  constructor(public navController: NavController) { }

  public toggleBoth(){
    this.booleanFlag1 = !this.booleanFlag1;
    this.booleanFlag2 = !this.booleanFlag2;
    if (this.i != 1) {
      this.i = 1;
      this.toggleToTrue (); 
    }
  }
  
  toggleToFalse(){
    console.log('Fired toggleToFalse()');
  }
  
  toggleToTrue(){
    console.log('Fired toggleToTrue()');
  }
}

This works for me, the toggleToTrue() is getting triggered before toggleToFalse (), though.

14

I managed to fix the problem by simply adding [checked]=“preference.enabled” to the ion-toggle element. I found some other examples on-line, decided to try it and the problem went away. Not sure I fully understand why but things are working ok now. Thanks again for your interest in helping out.

1 Like