HiveBrain v1.2.0
Get Started
← Back to all entries
principlejavascriptangularCritical

(change) vs (ngModelChange) in angular

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
angularchangengmodelchange

Problem

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:



vs change:

Solution

(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




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




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].



{{data.name}}




dataChanged(newObj) {
// here comes the object as parameter
}


assume you try the same thing without "ngModel things"



{{data.name}}




changed(e){
// event comes as parameter, you'll have to find selectedData manually
// by using e.target.data
}

Context

Stack Overflow Q#44840735, score: 743

Revisions (0)

No revisions yet.