onchange equivalente en angular2

onchange input angular 4

Question

Estoy usando onchange para guardar el valor de mi rango de entrada en firebase, pero tengo un error que dice que mi función no está definida.

esta es mi funcion

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

este es mi 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>

¿Cuál es el equivalente de onchange en angular, si existe? gracias

Answer 1

Podemos usar enlaces de eventos angulares para responder a cualquier evento DOM . La sintaxis es simple. Rodeamos el nombre del evento DOM entre paréntesis y le asignamos una declaración de plantilla citada. - reference

Como el change está en la lista de eventos DOM estándar , podemos usarlo:

(change)="saverange()"

En su caso particular, dado que está utilizando NgModel, podría romper el enlace bidireccional de esta manera:

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

Entonces

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

Sin embargo, con este enfoque se saverange() a saverange() con cada pulsación de tecla, por lo que probablemente sea mejor usar (change) .

Answer 2

@Mark Rajcok dio una gran solución para proyectos de iones que incluyen una entrada de tipo rango.

En cualquier otro caso de proyectos no iónicos, sugeriré esto:

HTML:

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

Componente:

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

    }

La idea aquí:

1. Dejar que el método (ngModelChange) haga el trabajo de Setter:

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

2. Habilitar el acceso directo al elemento Dom nativo mediante esta llamada:

   eRef.value = eventStrToReplace;

Answer 3

En Angular puede definir event listeners como en el siguiente ejemplo:

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