(change) vs (ngModelChange) in angular

change vs ngmodelchange in Angular

1. (change) is bound to the HTML “onchange” event.

• (change) event bound to classical input change event, you can use (change) event even if you don’t have a model at your input.

2. (ngModelChange) is bound to the “ngModel” directive.

• This event will be triggered for any changes that occur to the variable bound with “ngModel” directive.(ngModelChange) is the @Output of ngModel directive.
• If (ngModelChange) event written after [(ngModel)] then it will give us current value and If (ngModelChange) event written before [(ngModel)] then it will give us previous value.

Example

app.component.html

Change : <input type=”text” (change)=”onChange($event.target.value)”>
<p>Value of the field - {{val1}}</p>

ngModelChange : <input type=”text” [(ngModel)]=”val”  (ngModelChange)=”ngModelChange($event)”>
<p>Value of the field - {{val}}</p>

app.component.ts

val;
val1;
onChange(value) {
  console.log(“changed called”)
  this.val1 = value;
}

ngModelChange(value) {
  console.log(“ngModelChanged called”);
}

Here when the user changes the value in the input tag, the onChange method will be called after the blur event.

While ngModelChange will be called even before the blur event.