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"/>
change triggers when the user changes the input. ngModelChange triggers when the model changes, irrespective of that change is caused by the user or not.
The ng-change directive from AngularJS will not override the element's original onchange event, both the ng-change expression and the original onchange event will be executed. The ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus.
NgModel has a property called output bound to an EventEmitter instance, and when a change happens in view model, it will emit the ngModelChange event. From this we can come to a conclusion that, we cannot use (ngModelChange) event without ngModel . i.e., it's specific to Angular framework only.
The NgModel class has the update property with an EventEmitter instance bound to it. This means we can't use (ngModelChange) without ngModel . Whereas the (change) event can be used anywhere, and I've demonstrated that above with the [value] property binding instead.
(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 }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With