I have an app with ion-range UI element that is bound to a var using [(ngModel)] (2way) and then i have (ionChange) event that triggers a function that uses the value of ion-range.
Sometimes I need to "set" the range to a specific position by directly changing the var which is bound to ngModel, but I need to avoid triggering ionChange during this operation.
if I do that straightforward (see changeValue method) - the ionChange event will fire the moment the data changes and I need to avoid that (I need to place knob into a new location without triggering the event)
I used a trick with a flag (see changeValueViaFlag method) - now it works as expected, note I also have to use timeout, cause if I don't delay setting flag back to its "normal" state - angular's change detection won't pick up;(
UPDATE:
I tried the trick with ngModelChange which can be found in SO here: ionChange - detect changes only from view to model in Ionic 2 - the problem is with ngModelChange - I am not getting the same "change detection" as I get with ionChange...
So in my app the range is used to select color intensity. If I switch to ngModelChange - shape color intensity is not happening...;/
Question: is there a better way to achieve what I want?
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private testRange: number = 20;
private flag: boolean = true;
constructor(
public navCtrl: NavController,
) {
}
logRange($event) {
if (this.flag) {
console.log("ionChange emitted: ",$event.value, this.testRange)
}
}
changeValue() {
this.testRange = 10;
}
changeValueViaFlag() {
this.flag = false;
this.testRange = 10;
setTimeout(()=>{
this.flag = true;
}, 500)
}
}
<ion-header>
<ion-navbar>
<ion-title>
Ion range test case
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-range [(ngModel)]="testRange" (ionChange)="logRange($event)">
</ion-range>
<button ion-button (click)="changeValue()">Change range value to 10</button>
</ion-content>
More about “change ngModel bound to data without triggering a function bound to ionChange - Ionic 3” related questions