Explain Two Way data binding in Angular?

Web Development
#1

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