Angular (ngModelChange) vs (change)
December 30, 2023
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)">
price = "100";
onPriceChange(priceVal:string) {
this.price = priceVal;
console.log(this.price);
}
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" >
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)">
onPriceChange() will be called for value change.
5. If
ngModel is not used, ngModelChange event will not trigger.
<input (ngModelChange)="onPriceChange($event)">
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)">
onDataChange(eventVal: any) {
console.log(eventVal.target.value);
}
(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)">
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>
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);
}
}
