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

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

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

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

As I have found and wrote in another topic  - this applies to angular  lt  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     lt select  ngModelChange   onModelChange     ngModel   hero name   ngModelChange   hero name    event  gt    or   lt  ngModel   hero name   ngModelChange   hero name    event  select  ngModelChange   onModelChange    gt   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

[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