onchange equivalent in angular2
You can use:
<input (input)="saverange()>
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)
.
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()">
@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:
Letting the
(ngModelChange)
method to do the Setter job:(ngModelChange)="range=saverange($event, points)
Enabling direct access to the native Dom element using this call:
eRef.value = eventStrToReplace;