The ngModel is not working. I'm using it with textbox.
app.component.html
<input type="text" [value]="name" [ngModel]="name">
Name is: {{name}}
app.component.ts
name = '';
constructor() { }
ngOnInit(): void {
this.name = "Hello";
}
When I change the textbox value, the value is not changing in the component. But the two-way data binding is working with [(ngModel)]="name"
. Please help.
From ngModel
description,
If you have a one-way binding to ngModel with [] syntax, changing the domain model's value in the component class sets the value in the view. If you have a two-way binding with [()] syntax (also known as 'banana-in-a-box syntax'), the value in the UI always syncs back to the domain model in your class.
Either you can work with [(ngModel)]
, the two-way binding as you mentioned,
or you need to have the (ngModelChange)
event binding to update the variable with the input's value.
<input
type="text"
[ngModel]="name"
(ngModelChange)="name = $event"
/>