What is the difference between (change) vs (ngModelChange)?

Recently, I was trying to prepare myself for the upcoming interviews and it was a bit tough to search in google and open link and see same questions each and every time so I thought of sharing what I have found and what is most common questions someone should know if they are preparing for an interview.

Below Is the most common interview questions asked in Angular Developer Interviews. These questions and answers help to prepare for JavaScript developer interviews from junior to senior levels. Moreover, this article covers the basics to advance angular interview questions.

One of the most common questions that appear in the frontend interview is what is the difference between change and ngmodelchange? Let’s see the detailed explanation of this question

(change) basically bound to any input changes in the HTML.

We can add a method and it can be used easily.

<input (change)="changed()">

(ngModelChange) is the @Output of ngModel directive. It can be only used with ngModel and it fires when any changes happen to the model.

It can be used like this.

<input (ngModelChange)="changed($event)">changed(value) {
// do something with new value
}

Basically, it seems like there is no big difference between the two, but ngModel events gain power when you use [ngValue].

<select [(ngModel)]="calue" (ngModelChange)="changed($event)" name="data">
<option *ngFor="let data of serviceData" [ngValue]="data">
{{data.name}}
</option>
</select>
changed(value) {
// here comes the object as parameter
}

Let’s check if we haven't used ngmodel.

<select (change)="changed($event)">
<option *ngFor="let data of serviceData" [value]="data.id">
{{data.name}}
</option>
</select>
changed(e){
// event comes as parameter, you'll have to find selectedData manually
// by using e.target.data
}

References:

Are you preparing for interviews? Here are frequently asked interview questions in Angular. It covers the Latest interview questions for Angular and Frontend development. Let’s check how many of these questions you can answer?

Written by

Writing about Angular,JavaScript and Type Script related articles. Please follow, clap stories to motivate us writing more!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store