Software systems to innovate and grow

How to Bind Data to Your View

By Engineering Team December 19, 2016 10 mins read

“Data-driven web applications”. That’s what most of us are building. That means our application takes in data, processes it and then displays the processed (and / or raw) data in some form.

If you’ve been developing websites for a while, you’ve probably had to deal with DOM manipulations of some sort. These DOM manipulations aren’t straightforward and the code that we end up with isn’t very pretty. Libraries like jQuery made DOM manipulation easier, but the resulting code still looks clunky.

Displaying data isn’t the only challenging task. Dealing with user inputs and updating values can become tiring very quickly.

That’s exactly why we have front-end frameworks like Angular. They make it easier for us to mainpulate and bind data.

What is Data Binding?

Data binding allows us to connect our application’s logic to the user interface.

When we’re building large applications, we want to keep the code as modular and clean as possible. Part of the MVC pattern involves separating the logic of the application (the controller) from the template (the view) and the data (the model). Data binding is what brings these parts of our application together.

1 Way Data Binding

This is when the data flows in one direction. It can either be from the model to the view (to display data) or from the view to the controller / component (to handle user actions).

This is the kind of data binding most of us were familiar with before Angular hit the web.

2 Way Data Binding

If you jumped onto the Angular bandwagon because you saw the demo below, you probably know the power of 2-way data binding.

If you’re new to Angular, the code above is what we used in Angular 1.x for two-way data binding. When the user updates his name through the text input, the $scope model is updated automatically which in turn updates the view automatically and instantly.

This means the model can be updated with inputs from the view and the view can be updated when changes are made in the model – they are directly linked.

The Problem with 2 Way Data Binding

If you think that 2-way data binding sounds like a lot of work, you’re absolutely right! It is a lot of work… for the application.

As the size of our application grows, two-way data binding becomes a more expensive operation. That’s because of how Angular 1.x runs. You can read more about Angular 1.x $apply and $digest here.

Template Expressions

Angular uses expressions to bind data to templates. You may have seen something that looks like –

or

In the examples above, the double curly braces, and the round brackets surround “template expressions”. Angular evaluates these expressions and assigns them to the property of the target. In the first example, Angular gets the value of the title and assigns that value as the inner HTML of the <h1> tag.

Running The Test Project

You can get the code to follow along with this project with git clone https://github.com/cartab/ng2-data-binding.git. cd into the cloned directory and run npm install to install the project the dependencies. You may need to use sudo if your npm permissions aren’t correctly configured.

Once you’ve installed the dependencies, you can start the project with ng serve. This will start a development server on http://localhost:4200. Start off by looking into the app.component.html file and see how different types of data bindings are used there.

Play around with the code to get an intuitive idea of how different types of data binding work.

Types of Data Binding

In Angular data flows in the following directions –
1. to the DOM – binding values to properties
2. from the DOM – user actions
3. both directions

Based on the flow of data there are 4 types of data bindings in Angular –

1. Interpolation

Data flows to the DOM in this case.

The main purpose of interpolation is to display the value of a property from the component. It is the easiest and most frequently used method to show data to the user.

In the example above, AppComponent has 2 properties – title and purpose. These properties are displayed in the template through interpolation – {{propertyName}} (double curly braces).

If you’re wondering why we use the word “interpolation,” here’s the dictionary definition of the word “interpolate” –

to introduce (something additional or extraneous) between other things or parts; interject; interpose; intercalate.

Angular does the heavy lifting. It retrieves the values of the properties from the component and interjects / inserts them into the template.

2. Property Binding

It’s normal for components to contain other components. When we write reusable code, our components may have to behave differently based on the context in which they are invoked. Some components may also need to change state based on the availability of data.

For example, a button component to submit a form may need to be disabled till all the form fields are filled correctly and validated.

That’s when we need property binding – when we want to pass data to a component. Property binding evaluates an expression and passes the data which can be used as an input in the target component. Here’s an example of a template that uses property binding.

The property widgetValue is being given the value of the expression title. Notice that widgetValue is surrounded by square brackets. That is the notation that tells Angular to bind the value of the expression to the property of the element between the square brackets.

The value of title is set in the component that the template belongs to.

3. Event Binding

Interpolation and property binding allow data to flow from the component to the template. They don’t provide users any means to interact with the application. That’s where event bindings come in – they allow the user to interact with the application.

Let’s look at an example of one of the most basic events – click.

When this button is clicked, the click event will be launched. The code above tells Angular that the click event should invoke the toggleWidgetTwo() function.

The event binding notation consists of two components –
1. target event – this is surrounded by round brackets. This is the event / action we’re waiting for.
2. template statement – this is the statement that is used to respond to the event when it is triggered.

4. Two-Way Data Binding

Wait! Didn’t we just say that two-way data binding is bad for our application? Why does Angular still allow use to work with it?

Two-way Data Binding is a great feature and is useful in many cases. Now it’s just more complex to integrate Two-way Data Binding into applications now. This makes developers think twice before using it.

ngModel is the best example of this type of data binding.

In the example above, there are two elements that have some sort of data binding.

The first input element has two-way data binding. inputWidgetValue can be changed in the component that uses this template (model-view data binding). Note that this has round brackets along with square brackets. The user can edit the text input and change the value of inputWidgetValue (view-model binding).

The second element has property binding. It just binds the value of the expression inputWidgetValue to the widgetValue property. This value is used in the <widget-one /> component.

Conclusion

Data binding has changed a lot from Angular 1.x to Angular 2. The new syntax accompanied with the absence of abundant two-way data binding gives Angular 2 the performance edge.

But don’t take our word for it. Play around with the code in the sample project. Get a feel for how data binding works in Angular and the magic it can do.