Explain Data Binding and its types in Angular?

Web Development
#1

Data binding is a technique, where the data stays in sync between the component and the view. Whenever the user updates the data in the view, Angular updates the component. When the component gets new data, Angular updates the view. There are many uses of data binding.

We can show models to the user, dynamically Change element style, respond to user events, etc

Data Binding Classification:

The data binding in Angular can be broadly classified into two groups

One-way binding: In one-way binding data flows from one direction. Either from view to component or from component to view

From Component to View

To bind data from component to view, we make use of

Interpolation,

Property Binding,

Class Binding,

Style Binding

From View to Component

To bind data from view to the component, we make use of

Event Binding

Two-way binding: Two-way 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. Two-way 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 binding uses the special syntax known as a banana in a box [()]


<someElement [(someProperty)]=”value”></someElement>

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.

It is part of the @angular/forms. We can use it using the two-way binding syntax as shown below.

<input type="text" name="value" [(ngModel)]="value">