What is One-Way and Two-Way Data Binding in Angular?

Data binding in Angular can be categorized into two types- One-way data binding and two-way data binding. These two help exchange data from component to DOM, and vice-versa. The process is quite similar to that of the MVC architecture in terms of how the data is exchanged or synchronized between View to Model and Model to View. In Angular, the data exchange between the component and view assists us in creating dynamic and interactive web applications.

Today, we will take a look at one-way data binding vs two-way data binding in Angular. We will learn what they are, what role they play in the Angular framework, and what’s the difference between Angular’s one-way data binding and two-way data binding.

Let’s first understand what data binding is.

What is Data Binding in Angular?

Data binding, in general, is a technique to synchronize data between the model and view components automatically. It can also be defined as a process that establishes a connection between the app data and its UI. Data binding in Angular is nothing different. The process helps keep the data in sync between the component and view. Whenever the user updates the data (in the view), Angular updates the component, and when the component receives new data, it automatically updates the view.

Also Read: React vs Angular: Which is Better and Why?

As we mentioned earlier, data binding in Angular is broadly classified into two segments- one-way data binding and two-way data binding.

One-way Data Binding in Angular

One-way data binding in Angular binds the data either from the component to the view or from the view to the component. In other words, the data flow is uni-directional.

Case 1: From Component to View

One-way data binding uses various techniques to bind data from component to view. This broadly includes Property binding and Interpolation.

1. Property Binding

This technique is used to bind the property of an HTML element to the property of a component. It could be a style property or class property. Property binding can also be used to set properties of custom components or directives. It uses the following syntax-

[binding-target]=”binding-source”

The variable is encapsulated (in HTML) with square brackets. The target property should match the name of the enclosing element property. The binding source should be a template expression. Either it can be a property in a component, a method in a component, a template reference variable, or an expression containing all of them. When the value of the component changes, Angular updates the element property in the view.

Property binding consists of special syntaxes for setting the class and styles. However, it does not set the attributes of HTML elements. In that case, we use attribute binding.

2. Interpolation

Another technique that is used for one-way data binding is Interpolation. The technique binds the expressions into marked-up language. It is used to display a component property in the respective view template and is denoted by double curly braces syntax. The content inside the double braces is called template expression.

{{ templateExpression }}

All kinds of properties can be displayed in the view, for example, string, date, number, map, or arrays.

Angular first evaluates the Template Expression, converts it into a string, and then it replaces the Template Expression with the result in the original string in the HTML and then updates the view. Every time the Template Expression changes, Angular reupdates the original string. Interpolation can be used at any place where you use a string literal in the view.

Case 2: From View to Component

The data binding from View to Component in Angular is done using the Event binding technique.

Event Binding

This one-way data binding technique lets us bind events such as clicks, hover, and keystrokes to a method in the component. The component can be kept in sync with the view by tracking the events in the latter and responding to them.

For event binding, the syntax that Angular uses is-

<target-event)=”TemplateStatement”

It consists of a Target event name with a parenthesis on the left of an equal sign and a quoted Template Statement on the right.

Two-way Data Binding in Angular

Unlike one-way data binding, two-way data binding is bidirectional, which means the communication is established bidirectionally. Changes made to the model in the component are propagated to the view. Likewise, any changes made in the view are instantly reflected in the component. Two-way data binding comes extremely useful in data entry forms.

The syntax that two-way data binding uses is known as a banana in a box [()].

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

The above-mentioned syntax sets up both property binding and event binding as it is a combination of square brackets and parenthesis. However, in order to use it, the property must have the change event with the name <propertyName>Change

The technique that is used for two-way data binding is called the ngModel.

ngModel

As we mentioned above, Angular makes use of the ngModel directive to achieve the two-way binding on HTML Form elements. It binds to a form element like input, select, selectarea, etc.

The ngModel directive is not part of the Angular Core library but rather @angular/forms. You need to import the FormsModule package into your Angular module.

When you bind to a ngModel directive, in the background, it sets up property binding & event binding. It binds to the value property of the element using property binding and then uses the ngModelChange event to set up the event binding to listen to the changes in the value.

Summing Up

Data binding is an extremely useful feature in Angular. Data in angular can be bound in two different ways using different techniques.

If you have any queries regarding data binding in Angular, feel free to ask in the comments below.