Solución:
(change) evento vinculado al evento de cambio de entrada clásico.
https://developer.mozilla.org/en-US/docs/Web/Events/change
Puede usar (cambiar) el evento incluso si no tiene un modelo en su entrada como
<input (change)="somethingChanged()">
(ngModelChange) es el @Output de la directiva ngModel. Se dispara cuando cambia el modelo. 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 ngModel eventos gana el 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 cosas”
<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, el (ngModelChange)="eventHandler()" disparará antes de el valor ligado a [(ngModel)]="value" se cambia mientras el (change)="eventHandler()" disparará después el valor ligado a [(ngModel)]="value" está cambiado.
Como encontré y escribí 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 al que se le puede quitar el azúcar para: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".
Entonces, si eliminamos el azúcar del código, 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 ngModelChange eventos y los que deben ejecutarse en algún orden.
Resumiendo: Si colocas ngModelChange antes de ngModel, obtienes el $event como el nuevo valor, pero su objeto de modelo aún tiene el valor anterior.
Si lo colocas después ngModel, el modelo ya tendrá el nuevo valor.
FUENTE