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"/>
This question is related to
javascript
html
angular
typescript
angular-ngmodelchange
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 notIn 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.
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: Stackoverflow.com