CODEWITHSUNDEEP
angular
PrinceZee
PrinceZee

Reputation: 1598

onchange equivalent in angular2

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

Upvotes: 114

Views: 409400

Answers (4)

MHS
MHS

Reputation: 931

You can use:

<input (input)="saverange()>

Upvotes: 6

Kuldeep Kumar
Kuldeep Kumar

Reputation: 754

In Angular you can define event listeners like in the example below:

<!-- Here you can call public methods from parental component -->
<input (change)="method_name()">

Upvotes: 13

Dudi
Dudi

Reputation: 3079

@Mark Rajcok gave a great solution for ion projects that include a range type input.

In any other case of non ion projects I will suggest this:

HTML:

<input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)">

Component:

    onChangeAchievement(eventStr: string, eRef): string {

      //Do something (some manipulations) on input and than return it to be saved:

       //In case you need to force of modifing the Element-Reference value on-focus of input:
       var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, "");
       if (eventStr != eventStrToReplace) {
           eRef.value = eventStrToReplace;
       }

      return this.getNumberOnChange(eventStr);

    }

The idea here:

  1. Letting the (ngModelChange) method to do the Setter job:

    (ngModelChange)="range=saverange($event, points)

  2. Enabling direct access to the native Dom element using this call:

    eRef.value = eventStrToReplace;

Upvotes: 5

Mark Rajcok
Mark Rajcok

Reputation: 364707

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).

Upvotes: 218

Related Questions