(change) vs (ngModelChange) in angular

javascript html angular typescript angular-ngmodelchange

Angular 1 does not accept onchange() event, it's only accepts ng-change() event.

Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing.

What's the difference?

which one is best for performance?

ngModelChange:

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

vs change:

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

I don't want to compare those. I just want to know which one is best for performance ?

Yeah there is no comparison . If you are using ngModel you can use the later otherwise the first one . Its always preferred to avoid ngModel as that's two way data binding , hence bad for performance

Edited to put emphasis on "what's the difference" and "which is more performant" to remove subjectivity & voted to reopen.

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.

By the way, the (change) event is fired only when the focus leaves the input. If you want an event fired after each key-press, you can use the (input) event.

Michael

(change) event bound to classical input change event.

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

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.

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

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

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

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">
          {{data.name}}
      </option>
  </select>

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">
        {{data.name}}
    </option>
</select>

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

What will happen if I am using change event with ngmodel object?

@RameshRajendran I've improved the answer. You can still use change event with ngModel object, but change event passes event parameter, ngModelChange event passes new value.

Yeah +1 . But I have a problem with ngmodelchange, when you clear all the values from text box by using ctr + A. then ngModelChange does not trigger .

<input (ngModelChange)="modelChanged($event)"> is not right, [ngModel] is required.

Something, you cannot do an (change), in this case, you can do a (onClick)="yourFunction(youParameter)"

Tiago Martins Peres

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.

I justed tested in Angular 7.1 and the value from the ngModel is updated before the event is called. So that's what I use

Isn't it the other way around? According to the Angular Docs ngModelChange fires after the view model updates.

In the latest documentation of angular this case is described: angular.io/guide/…

In Angular 7.2, indeed the (ngModelChange) event is fired before the value is changed and (change) after it has changed. Thanks for the info, super helpful!

Why would someone want an function to fire before the value bound to the model has changed?

Balaj Khan

As I have found and wrote in another topic - this applies to angular < 7 (not sure how it is in 7+)

Just for the future

we need to observe that [(ngModel)]="hero.name" is just a short-cut that can be de-sugared to: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

So if we de-sugar code we would end up with:

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

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

If you inspect the above code you will notice that we end up with 2 ngModelChange events and those need to be executed in some order.

Summing up: If you place ngModelChange before ngModel, you get the $event as the new value, but your model object still holds previous value. If you place it after ngModel, the model will already have the new value.

SOURCE

Thank you for pointing this out! I had this problem until I found your explanation

This made my day!. I did not know about the order of ngModel and ngModelChange makes behavior change. Thanks a lot

The sequence of the ngModel and ngModelChange is still relevant in for angular 10+. What a bad gotcha!

How come it's hero.name = $event and not hero.name = $event.value ?

Sorry, I meant $event.target.value instead of $event.value

Julien

1 - (change) is bound to the HTML onchange event. The documentation about HTML onchange says the following :

Execute a JavaScript when a user changes the selected option of a