change vs ngModelChange in angular

Question

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    lt input type  text  pInputText class  ui-widget ui-text       ngModelChange   clearFilter    placeholder  Find   gt    vs change    lt input type  text  pInputText class  ui-widget ui-text        change   clearFilter    placeholder  Find   gt

User · Answer

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

User · Answer

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

User · Answer

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     lt input  change   somethingChanged    gt     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    lt input  ngModelChange   modelChanged  event   gt    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        lt select   ngModel    data   ngModelChange   dataChanged  event   name  data  gt         lt option  ngFor  let currentData of allData   ngValue   currentData  gt              data name          lt  option gt     lt  select gt    dataChanged newObj           here comes the object as parameter     assume you try the same thing without  ngModel things    lt select  change   changed  event   gt       lt option  ngFor  let currentData of allData   value   currentData id  gt            data name        lt  option gt   lt  select gt    changed e          event comes as parameter  you ll have to find selectedData manually        by using e target data

User · Answer

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  lt select gt  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

[javascript] (change) vs (ngModelChange) in angular

Examples related to javascript

Examples related to html

Examples related to angular

Examples related to typescript

Examples related to angular-ngmodelchange