javascript - (cambio) vs(ngModelChange) en angular

ngmodelchange angular 6

Question

Angular 1 no acepta el evento onchange, solo acepta el evento ng-change .

Angular 2, por otro lado, acepta los eventos (change) y (ngModelChange) , 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"/>

Answer 1

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

tenemos que observar que [(ngModel)] = "hero.name" es solo un atajo que se puede deshabilitar para: [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 eventos ngModelChange y esos deben ejecutarse en algún orden.

En resumen: si coloca ngModelChange antes de ngModel, obtendrá el evento $ como el nuevo valor, pero su objeto modelo aún conserva el valor anterior. Si lo coloca después de ngModel, el modelo ya tendrá el nuevo valor.

FUENTE

Answer 2

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

Answer 3

(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 directiva @Output de 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 eventos ngModel ganan poder cuando 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 " ngModel things"

<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
}