CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-ngmodelchange
Ramesh Rajendran
Ramesh Rajendran

Reputation: 38713

(change) vs (ngModelChange) in angular

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"/>

Upvotes: 526

Views: 1106550

Answers (6)

danday74
danday74

Reputation: 57231

----- (change) -----

(change) is the Angular equivalent to the JavaScript event handler:

addEventListener('change', (event) => {})
onchange = (event) => {}

For more see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

----- (ngModelChange) -----

To understand (ngModelChange) you should first understand banana in a box (BIAB) syntax:

<input name="surname" [(ngModel)]="surname">

BIAB provides two way binding ... if the controller variable changes it updates the view and if the bound value in the view changes it updates the controller variable.

The following is 100% exactly the same as BIAB:

<input name="surname" [ngModel]="surname" (ngModelChange)="updateSurname($event)">

updateSurname(surname) {
  this.surname = surname
}

However, the use of ngModelChange gives the flexibility to do something different to the default BIAB behaviour. For example:

// example 1 - you can log
updateSurname(surname) {
  console.log(surname)
  this.surname = surname
}

// example 2 - you can modify
updateSurname(surname) {
  this.surname = surname + ' hello'
}

Upvotes: 2

Viplav Soni
Viplav Soni

Reputation: 1727

As per my experience (change) and (ngModelChange) has two different usage.

  1. (ngModelChange) triggers when HTML renders, user changed the value of that element.

  2. (change) triggers when user changes the value and leave the element focus.

Usage:

  1. (ngModelChange): when you have critical things that depends on html any type of changes that you have to handle.
  2. (change): When you have to handle only value changes done by user.

Note: Be careful while using the (ngModelChange) because sometimes it will give you maximum call stack issue and your form will stuck.

Upvotes: 14

Julien
Julien

Reputation: 2756

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 <select> element

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

2 - As stated before, (ngModelChange) is bound to the model variable binded to your input.

So, my interpretation is :

  • (change) triggers when the user changes the input
  • (ngModelChange) triggers when the model changes, whether it's consecutive to a user action or not

Upvotes: 18

Disaster
Disaster

Reputation: 901

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

or

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

Upvotes: 59

omeralper
omeralper

Reputation: 10124

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

Upvotes: 739

CAK2
CAK2

Reputation: 2000

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.

Upvotes: 154

Related Questions