NgModelChange & Change Event in Angular

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

NgModelChange Example

The following is the simple example of ngModelChange.

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

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.

ngModel

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.

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

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.

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

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.

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

Angular internally converts it as follows

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

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.

Component class

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

NgModelChangeChange
NgModelChange is Angular specific eventChange is a DOM Event and has nothing to do with the Angular.
We must use the ngModelChange along with the ngModel directiveYou can use change event on <input>, <select>, and <textarea> form elements.
ngModelChange event passes new valueChange event passes event parameter, Use the target.value to access the new value
ngModelChange will trigger with each input changeChange event fires when you remove the focus from input text after changing the content.

References

ngModel

Source Code

1 thought on “NgModelChange & Change Event in Angular”

  1. If nothing seems to work, check the terminal window where you launched the server with ng serve. If you see this error Can't bind to 'ngModel' since it isn't a known property of 'input'., then check app.module.ts in @NgModule > imports to see if FormsModule is present.

    (Other subject) The point the author is making at the end of the section **ngModelChange with ngModel** is that you should not put the (ngModelChange) before [(ngModel)]. Here are my logs showing the correct order for firstName, and incorrect order for lastName:

    app.component.ts:23 firstNameChanged {arg: "F", this.firstName: "F"}
    app.component.ts:23 firstNameChanged {arg: "Fi", this.firstName: "Fi"}
    app.component.ts:23 firstNameChanged {arg: "Fir", this.firstName: "Fir"}
    app.component.ts:23 firstNameChanged {arg: "Firs", this.firstName: "Firs"}
    app.component.ts:23 firstNameChanged {arg: "First", this.firstName: "First"}
    app.component.ts:27 lastNameChanged {arg: "L", this.lastName: undefined}
    app.component.ts:27 lastNameChanged {arg: "La", this.lastName: "L"}
    app.component.ts:27 lastNameChanged {arg: "Las", this.lastName: "La"}

    And I just noticed, but if you have any problem, it looks like the author adds a link to his code in **Reference** > Source code at the end of the page before the Comment section, and you can see his code and preview the result.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top