NashTech Insights

NgModelChange & Change Event in Angular

Alka Vats
Alka Vats
Table of Contents


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. Another way to listen for change is to use the change DOM event. We also learn how to use them and also the difference between change & ngModelChange.

If you are using template driven forms or reactive forms, then the better way to listen for changes is using the ValueChanges observable

Let’s learn through an example:

NgModelChange Example

The following is a simple example of ngModelChange.

We assign the method in the component class (handler function) to  ngModelChange using the event binding syntax

<input type="text" name="name" ngModel (ngModelChange)="nameChanged($event)">

nameChanged is the handler function, which we need to define in the component class. We can access the new value by using the $event as an argument to the handler function.

nameChanged(arg) { 
   console.log("modelchanged " + arg);


We usually use the ngModel as follows to achieve the two-way binding. [(ngModel)]=”email” keeps the email property in the component class in sync with the template.

 <input type="text" name="email" [(ngModel)]="email">

Internally, Angular converts the above syntax to the following syntax.

<input [ngModel]="email" (ngModelChange)="email = $event">

The component property email is bound to the input element using the property binding ( [ngModel]=”email”). Any changes made to the input is updated in the component using the (ngModelChange)=”email = $event” event binding.

ngModelChange with ngModel

Consider the following example.

<input [(ngModel)]="firstName" (ngModelChange)="firstNameChanged($event)"/>

The Angular converts the above to the following syntax. We end up with the two ngModelChange event bindings.

<input [ngModel]="firstName (ngModelChange)="firstName = $event"   (ngModelChange)="firstNameChanged($event)"/>

Here the ngModelChange fires in the order it is specified. Hence the (ngModelChange)="firstName = $event" fires first. (ngModelChange)="firstNameChanged($event)" fires later.

Hence in the component class, the arg & this.firstName is always the same.

firstNameChanged(arg) {
      "firstNameChanged  argument " + arg + "  component " + this.firstName

But if you put ngModelChange ahead of the ngModel as in the example below

<input (ngModelChange)="lastNameChanged($event)" [(ngModel)]="lastName" />

Angular internally converts it as follows

<input (ngModelChange)="lastNameChanged($event)" [ngModel]="lastName" (ngModelChange)="lastName= $event"   />

Here (ngModelChange)="lastNameChanged($event)" fires first. Hence in the component class arg contains the latest value of the, while this.lastName still holds the previous value

lastNameChanged(arg) {
      "lastNameChanged  argument " + arg + "  component " + this.lastName

Change Event

The (change) is a DOM event fires when changes to the form fields like <input><select>, and <textarea> is committed by the user.

This event fires when

  • user changes the input & moves the focus away from the text box (blur event)
  • On <select> it fires when the user selects a new option either by a mouse click or using a keyboard.
  • Fires when the state of a check box or radio button change due to users action

Change Event Example

The following example shows how to use the change event in Angular.

<input type="text" name="name1" (change)="name1Changed($event)">
<select name="country1" (change)="country1Changed($event)" >
  <option [ngValue]="null" disabled>Select Country</option>
  <option *ngFor="let country of countries" [ngValue]="">{{}}</option>

Component class

name1Changed(arg) {
 console.log("name1Changed " +;
country1Changed(arg) {
  console.log("country1Changed " +;

The change event for text element fires when we move the focus away from the element (blurred the input). This is different from the ngModelChange, which fires the event for each input change.

The other import point is the $event parameter. In the ngModelChange, it is always the new value. But in the case of a change event, it is event data. The event data is an object containing data about the event. We need to use the target.value to access the value.

NgModelChange Vs Change



In this blog, we have learned about ngModelChange, its implementation through an example. Happy learning!!

Alka Vats

Alka Vats

Alka Vats is a Software Consultant at Nashtech. She is passionate about web development. She is recognized as a good team player, a dedicated and responsible professional, and a technology enthusiast. She is a quick learner & curious to learn new technologies. Her hobbies include reading books, watching movies, and traveling.

Leave a Comment

Your email address will not be published. Required fields are marked *

Suggested Article

%d bloggers like this: