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
|
1
2
3
4
5
6
|
//Template
Name:
<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.
|
1
2
3
4
5
6
|
//Component
nameChanged(arg) {
console.log("modelchanged " + arg);
}
|
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.
|
1
2
3
|
<input type="text" name="email" [(ngModel)]="email">
|
Internally, Angular converts the above syntax to the following syntax.
|
1
2
3
|
<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.
|
1
2
3
|
<input [(ngModel)]="firstName" (ngModelChange)="firstNameChanged($event)"/>
|
The Angular converts the above to the following syntax. We end up with the two ngModelChange event bindings.
|
1
2
3
|
<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.
|
1
2
3
4
5
6
7
8
9
10
|
firstName
;
firstNameChanged(arg) {
console.log(
"firstNameChanged argument " + arg + " component " + this.firstName
);
}
|
But if you put ngModelChange ahead of the ngModel as in the example below
|
1
2
3
4
|
<input (ngModelChange)="lastNameChanged($event)" [(ngModel)]="lastName" />
|
Angular internally converts it as follows
|
1
2
3
|
<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
|
1
2
3
4
5
6
7
8
9
10
|
lastName
;
lastNameChanged(arg) {
console.log(
"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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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>
|
Component class
|
1
2
3
4
5
6
7
8
9
10
11
|
name1Changed(arg) {
console.log("name1Changed " + arg.target.value);
console.log(arg);
}
country1Changed(arg) {
console.log("country1Changed " + arg.target.value);
console.log(arg);
}
|
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 event | Change is a DOM Event and has nothing to do with the Angular. |
| We must use the ngModelChange along with the ngModel directive | You can use change event on <input>, <select>, and <textarea> form elements. |
| ngModelChange event passes new value | Change event passes event parameter, Use the target.value to access the new value |
| ngModelChange will trigger with each input change | Change event fires when you remove the focus from input text after changing the content. |
References
'Angular JS' 카테고리의 다른 글
| Angular Directives (0) | 2022.01.15 |
|---|---|
| Child/Nested Components in Angular (0) | 2022.01.15 |
| ngModel & Two way Data binding in Angular (0) | 2022.01.15 |
| Event Binding in Angular (0) | 2022.01.15 |
| Property Binding in Angular (0) | 2022.01.15 |
댓글