Two-Way data binding (ngModel). Two-way data binding means that changes made to our model in the component are propagated to the view and that any changes made in the view are immediately updated in the underlying component data.
Two-way data binding is useful in data entry forms
Whenever a user makes changes to a form field, we would like to update our model. Similarly, when we update the model with new data, we would like to update the view as well
The two-way data binding is nothing but both property binding & event binding applied together
Property Binding is one way from component to view. The event binding is one way from view to component. If we combine both we will get the Two-way binding.
The Angular two-way data binding syntax is as below
<someElement [(someProperty)]=”value”>
</someElement>
The above syntax sets up both property & event binding. But to make use of it, the property must follow the following naming convention
Assign it to a template statement within a quote on the right side
The Angular uses the ngModel directive to achieve the two-way binding on HTML Form elements
It binds to a form element like input, select, textarea. etc.
Internally It uses the ngModel in property, binding to bind to the value property and ngModelChange which binds to the input event
The ngModel directive is not part of the Angular Core library
It is part of the FormsModule library. You need to import the FormsModule package into your Angular module