NgModelChange And Change Event In Angular

The Code Points May 26, 2022 0

In this article, we will learn about the NgModelChange and Change Event in Angular. NgModelChange is an Angular event that may be used to listen for changes in user input. Because it is the @Output property of the ngModel directive, we must use it in conjunction with it. When the model changes, ngModle fires the NgModelChange event. The change DOM event is another technique to listen for changes. We will also learn how to use them and the distinction between change and ngModelChange.

NgModelChange Example

The following is a simple ngModelChange example.

Using the event binding syntax, we give the component class's method (handler function) to the ngModelChange.

Open the app.component.html and add the following code:

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

The handler function, nameChanged, must be defined in the component class. The new value can be accessed by passing $event as a parameter to the handler function.

open the app.component.ts and add the following code:

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

ngModel

To create a two-way binding, we commonly use the ngModel as seen below. [(ngModel)]="email" maintains the component class's email property 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 attached to the input element via property binding ([ngModel]="email"). The (ngModelChange)="email = $event" event binding updates the component whenever the input changes.

ngModelChange with ngModel

Example

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

The above is converted to the following syntax by Angular. The two ngModelChange event bindings are the result.

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

The ngModelChange is called in the order indicated. As a result, the (ngModelChange)="firstName = $event" event is the first to fire. Later, the event (ngModelChange)="firstNameChanged($event)" triggers.

As a result, the parameter & this.firstName is always the same in the component class.

firstName;
 
firstNameChanged(arg) {
  console.log(
      "firstNameChanged  argument " + arg + "  component " + this.firstName
  );
}

However, if you place ngModelChange before the ngModel, as seen in the example below,

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

Internally, Angular transforms it as follows:

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

The event (ngModelChange)="lastNameChanged($event)" is the first to fire here. As a result, arg in the component class has the most recent value of the, whereas this. The value of this.lastName is still the same as before.

lastName;
 
lastNameChanged(arg) {
  console.log(
      "lastNameChanged  argument " + arg + "  component " + this.lastName
  );
}

Change Event

When the user commits changes to form fields like <input>, <select>, and <textarea> the (change) DOM event triggers.

This event fires when,

• The emphasis is moved away from the text box as the user modifies the input (blur event)
• It fires on <select> when the user selects a new option using the mouse or the keyboard.
• When the state of a check box or radio button changes as a result of a user action, this event is triggered.

Change Event Example

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

open the app.component.html and add the following code:

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

When we move the attention away from the text element, the change event is triggered (blurred the input). The ngModelChange, on the other hand, fires an event for each input change.

The $event parameter is another crucial component. It is always the new value in the ngModelChange. It is, however, event data in the case of a change event. The event data object is a collection of information about the event. To get to the value, we'll need to use target.value.

Conclusion

In this article, we learned about the NgModelChange and Change Event in Angular. NgModelChange is an Angular event that may be used to listen for changes in user input.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.