(cambio) vs (ngModelChange) en angular

Angular 1 no acepta onchange()eventos, solo acepta ng-change()eventos.

Angular 2, por otro lado, acepta ambos (change)y (ngModelChange)eventos, que parecen estar haciendo lo mismo.

¿Cual es la diferencia?

¿Cuál es el mejor para el rendimiento?

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs cambio :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

(change) evento vinculado al evento de cambio de entrada clásico.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Puede usar el evento (cambio) incluso si no tiene un modelo en su entrada como

<input (change)="somethingChanged()">

(ngModelChange)es la @Outputdirectiva ngModel. Se dispara cuando el modelo cambia. No puede usar este evento sin la directiva ngModel.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

A medida que descubra más en el código fuente, (ngModelChange)emite el nuevo valor.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Entonces significa que tiene la capacidad de tal uso:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

Básicamente, parece que no hay una gran diferencia entre dos, pero los ngModeleventos ganan poder cuando los usas [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

suponga que intenta lo mismo sin " ngModelcosas"

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

En Angular 7, (ngModelChange)="eventHandler()"se disparará antes de que [(ngModel)]="value"se cambie el valor vinculado, mientras que (change)="eventHandler()"se disparará después de que [(ngModel)]="value"se cambie el valor vinculado .

Como he encontrado y escrito en otro tema, esto se aplica a angular <7 (no estoy seguro de cómo es en 7+)

Solo para el futuro

hay que observar que [(ngModel)]="hero.name"es sólo un atajo que puede ser azucarado-de a: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Entonces, si eliminamos el código de azúcar, terminaríamos con:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

o

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Si inspecciona el código anterior, notará que terminamos con 2 ngModelChangeeventos y esos deben ejecutarse en algún orden.

En resumen: si coloca ngModelChangeantes ngModel, obtiene el $eventcomo el nuevo valor, pero su objeto modelo todavía tiene el valor anterior. Si lo coloca después ngModel, el modelo ya tendrá el nuevo valor.

FUENTE

1: (change) está vinculado al evento de cambio de HTML. La documentación sobre HTML onchange dice lo siguiente:

Ejecuta un JavaScript cuando un usuario cambia la opción seleccionada de un <select>elemento

Fuente: https://www.w3schools.com/jsref/event_onchange.asp

2 - Como se indicó anteriormente, (ngModelChange)está vinculado a la variable de modelo vinculada a su entrada.

Entonces, mi interpretación es:

• (change)se dispara cuando el usuario cambia la entrada
• (ngModelChange) se dispara cuando el modelo cambia, ya sea consecutivo a una acción del usuario o no