question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Order of ngModel & onModelChange

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Currently the order of (ngModelChange) and [(ngModel)] on an input element matters. In the following case the ngModelChange callback is called before ngModel updates the value of model:

<select (ngModelChange)="onModelChange()" [(ngModel)]="hero.name" >
   <option>Dexter</option>
   <option>Voltron</option>
</select>

The following however works fine:

<select  [(ngModel)]="hero.name" (ngModelChange)="onModelChange()">
   <option>Dexter</option>
   <option>Voltron</option>
</select>

Expected/desired behavior

Not sure what the expected behavior should be or if this the intended behavior. But I think the order of attributes in an element should not matter.

Reproduction of the problem Link to plunker: http://plnkr.co/edit/wrVrHYx3pPdLmCKz17RL?p=preview

Open up the console and select Hero name from the drop-down. Notice how the values are printed in console. Swap the order of ngModel and onModelChange and observe the difference.

  • Angular version: 2.0.0-rc.5
  • Browser: Chrome Version 52.0.2743.116 m
  • Language: TypeScript

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:39
  • Comments:21 (5 by maintainers)

github_iconTop GitHub Comments

13reactions
KirillNikalaichukcommented, Jan 10, 2020

The bug is still here in version 9.0.0-rc.8

8reactions
alinmateutcommented, Nov 20, 2019

The bug is still here in version 8.2.14

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 2 : trying to update ngModel with onModelChange ...
I want to do something inside the component class after updating the model, like emitting an event or computing values. Therefore I cannot ......
Read more >
Difference between (change) and (ngModelChange) in Angular
Whereas ngModelChange is an Angular event. It fires when ngModel changes. Essentially, we want to learn the difference between these and learn ...
Read more >
ngModelChange and change events in Angular with examples
ngModelChange is the @output property of ngModel directive. and ... And they will be called in the order of their placement in the...
Read more >
NgModelChange & Change Event in Angular - TekTutorialsHub
It is the @Output property of the ngModel directive, Hence we need to use it ... Here the ngModelChange fires in the order...
Read more >
What is the difference between change and ngModelChange ...
ngModelChange need ngModel class to function. change event bound to classical input change event. ngModelChange It fires when the model changes.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found