onchange equivalent in angular2

Question

i'm using onchange to save the value of my input range into firebase , but i have an error who say that my function is not defined.

this is my function

saverange(){   this.Platform.ready().then(() => {     this.rootRef.child("users").child(this.UserID).child('range').set(this.range)   }) }  

this is my html

<ion-item>   <ion-row>     <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col>     <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col>   </ion-row> </ion-item> 

what is the equivalent of onchange in angular , if one exist. thank you

Answer 1

We can use Angular event bindings to respond to any DOM event. The syntax is simple. We surround the DOM event name in parentheses and assign a quoted template statement to it. -- reference

Since change is on the list of standard DOM events, we can use it:

(change)="saverange()" 

---

In your particular case, since you're using NgModel, you could break up the two-way binding like this instead:

[ngModel]="range" (ngModelChange)="saverange($event)" 

Then

saverange(newValue) {   this.range = newValue;   this.Platform.ready().then(() => {      this.rootRef.child("users").child(this.UserID).child('range').set(this.range)   }) }  

However, with this approach saverange() is called with every keystroke, so you're probably better off using (change).