angularangular2-templateangular2-ngmodel

Angular - ngModel is not updating the value to the component


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.


Solution

  • 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"
    />
    

    Demo @ StackBlitz