(change) vs (ngModelChange) in angular

(change) vs (ngModelChange) in angular

Angular 1 does not accept the onchange event, it’s only accepts the ng-change event.
Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seem to be doing the same thing.
What’s the difference?
which one is best for performance?

vs change:


Solution 1:

(change) event bound to classical input change event.


You can use (change) event even if you don’t have a model at your input as

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

(ngModelChange) is the @Output of ngModel directive. It fires when the model changes. You cannot use this event without ngModel directive.


As you discover more in the source code, (ngModelChange) emits the new value.


So it means you have ability of such usage:

<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
    // do something with new value

Basically, it seems like there is no big difference between two, but ngModel events gains the power when you use [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
dataChanged(newObj) {
    // here comes the object as parameter

assume you try the same thing without “ngModel things”

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data

Solution 2:

In Angular 7, the (ngModelChange)="eventHandler()" will fire before the value bound to [(ngModel)]="value" is changed while the (change)="eventHandler()" will fire after the value bound to [(ngModel)]="value" is changed.

Related:  How to set the Google Map zoom level to show all the markers?