Angular (ngModelChange) vs (change)

By Arvind Rai, December 30, 2023
1. The ngModelChange is an @Output property of Angular NgModel Directive whereas change event is HTML DOM event that triggers when the value of element is modified.
2. NgModel performs two-way binding as [(ngModel)]. If we want two use separately, use ngModel in property binding and ngModelChange in event binding.
3. For value change in <input>, <select> and <textarea> element, ngModelChange event triggers only with ngModel whereas change event always triggers.
4. In ngModelChange the $event directly gives the value of HTML element whereas in change event the $event gives value of input element by using $event.target.value .

(ngModelChange) Event

1. NgModel Directive plays the role of two-way binding in HTML elements. NgModel uses names as ngModel in property binding and ngModelChange in event binding.
2. ngModelChange event triggers when the value of the view model changes.
3. The two-way binding [(ngModel)] is the combination of property binding [ngModel] and event binding (ngModelChange) .
Look into the code.
HTML code:
<input [ngModel]="price" (ngModelChange)="onPriceChange($event)"> 
TS code:
price = "100";
onPriceChange(priceVal:string) {
    this.price = priceVal;
	console.log(this.price);
} 
When the user changes the value into input text, ngModelChange event will trigger and onPriceChange() method will be called.
The above code is equivalent to [(ngModel)] two-way binding as below.
<input [(ngModel)]="price" > 
Change in value of input text will reflect in the value of price. We can verify its value using {{price}} in HTML template.
4. In case we use ngModel as an attribute and not as property binding, ngModelChange event will still trigger.
<input ngModel (ngModelChange)="onPriceChange($event)"> 
In the above code onPriceChange() will be called for value change.
5. If ngModel is not used, ngModelChange event will not trigger.
<input (ngModelChange)="onPriceChange($event)"> 
In the above code onPriceChange() will not be called for value change.

(change) Event

1. change is the HTML DOM event that triggers when we modify values in <input>, <select> and <textarea> elements.
2. change event is used as following.
HTML code:
<input (change)="onDataChange($event)"> 
TS code:
onDataChange(eventVal: any) {
   console.log(eventVal.target.value);
} 
3. In (change)="onDataChange($event)", value is obtained using $event.target.value whereas in (ngModelChange)="onDataChange($event), the object $event directly gives the value.
4. ngModelChange and change event both can be used together. In input text, ngModelChange event triggers just after value change whereas change event triggers on value change + on focus out.
HTML code:
<input [ngModel]="price"
   (ngModelChange)="onPriceChange1($event)"
   (change)="onPriceChange2($event)"> 
TS code:
price = "110";
onPriceChange1(priceVal:string) {
	this.price = priceVal;
	console.log("ngModelChange: ", this.price);
}
onPriceChange2(e: any) {
	console.log("change: ", e.target.value);
} 

Complete Example

employee.component.html
<div>
	Name:
	<input [ngModel]="empName" (ngModelChange)="onNameChange($event)">
</div>
<div>
	Age:
	<input (change)="onAgeChange($event)">
</div>
<div>
	Profile:
	<select [ngModel]="profile" (ngModelChange)="onProfileChange($event)">
		<option value="manager">Manager</option>
		<option value="developer">Developer</option>
		<option value="director">Director</option>
	</select>
</div>
<div>
	Gender:
	<input type="radio" value="male" name="empGender" (change)="onEmpGenderChange($event)"> Male
	<input type="radio" value="female" name="empGender" (change)="onEmpGenderChange($event)"> Female
</div>
<div>About Employee:
	<textarea [(ngModel)]="aboutEmp"></textarea>
	<br />{{aboutEmp}}
</div>
employee.component.ts
import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
	selector: 'app-emp',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './employee.component.html'
})
export class EmployeeComponent {
	aboutEmp = "Write about employee";
	empName = "Ram";
	onNameChange(name: string) {
		this.empName = name;
		console.log(this.empName);
	}
	onAgeChange(ageEvent: any) {
		console.log(ageEvent.target.value);
	}
	profile = "developer";
	onProfileChange(profile: string) {
		this.profile = profile;
		console.log(this.profile);
	}
	onEmpGenderChange(genEvent: any) {
		console.log(genEvent.target.value);
	}
} 
Find the print-screen of the output.
Angular (ngModelChange) vs (change)

References

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us