How can I get the values after a model has changed? The (change)
event does fire before the model change. I do not want to use event.target.value
<input type="checkbox" (change)="mychange(event)" [(ngModel)]="mymodel"> public mychange(event) { console.log(mymodel); // mymodel has the value before the change }
ngModelChange It fires when the model changes. You cannot use this event without ngModel directive. 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.
NgModelChange is an Angular specific event, which we can use to listen for changes to the user input. It is the @Output property of the ngModel directive, Hence we need to use it along with it. ngModle raises the NgModelChange event, whenever the model changes.
The NgModel class has the update property with an EventEmitter instance bound to it. This means we can't use (ngModelChange) without ngModel .
If we use two way binding syntax for ngModel the value will be updated. So the default (ngModelChange) function will update the value of ngModel property. i.e., user.Name . And the second (ngModelChange) will be triggered printing the user name value in the console.
That's a known issue. Currently you have to use a workaround like shown in your question.
This is working as intended. When the change event is emitted ngModelChange
(the (...)
part of [(ngModel)]
hasn't updated the bound model yet:
<input type="checkbox" (ngModelChange)="myModel=$event" [ngModel]="mymodel">
See also
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