Why I like Angular: Two-way data binding

This blog post is a gentle introduction to the AngularJS framework, Angular for short. I’m only going to cover one feature – there are other reasons why I like it but I’ll save those for a future post! I’ll also point out that I’m a strong believer in using the right tools for the job – although I am a big fan of Angular, there are situations where other tools, like React, might be more suitable.

I’m going to cover Angular 1 syntax, as that is what I’m most familiar with, but the same concept exists in Angular 2 and I’ll include the new syntax at the end.

Now let’s get straight down to business with some HTML:

 <input type="text" ng-model="model"></input>
 <p>You entered: {{model}}</p>

Angular keeps the HTML separate from the JavaScript, but does enhance the HTML with extra features. The first of which is the ng-model attribute to the input element. This is an Angular directive that binds the input field to a property. In this case we are binding the value of the text field to a property called model. This means that whenever the value of the text field changes, the value of the property changes too.

We can see this by using another feature: Angular expressions. These are inserted into the HTML using {{ and }} characters. So the string “{{model}}” is replaced by the results of evaluating the Angular expression “model“, which in this case is simply the value of that property. So with the above HTML, we can type into the text field and the characters are immediately shown in the paragraph below:

That shows the binding working in one direction, from the value of the input field to the property. It also works in the other direction – let’s try that out by adding a button to our example:

<button ng-click="model='Testing'">Press me</button>

Here we have another Angular directive, ng-click which runs the given expression when the button is pressed:

As shown, pressing the button sets the model property, and because the input field is bound to that property with two-way data binding, it notices the change and updates the value of the input field.

This simple concept is very powerful, and saves you writing a lot of code. Imagine you’re writing an application that has a form with multiple fields, and then a submit button – a very common scenario in web apps! A traditional approach would be to add a click listener to the submit button, then find each input element in the DOM, extract its value, and collect them together into a JavaScript object for sending back to the server. And if you need to initialise the form with values returned from the server, you need additional code to take each value in turn, find the corresponding input element, and set its value accordingly. Instead, with Angular you only need to bind each input element to the appropriate property. Then when that property is set with the initial values, the fields automatically display those values. And when the submit button is pressed, the property automatically contains all the current values from the input elements.

For me this was one of the features that first attracted me to Angular. It certainly saves a lot of time when writing form based applications.

Angular 2 update:

Angular 2 onwards supports the same two-way data binding, but the syntax is now like this:

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

To help you remember this syntax of round brackets inside square brackets, it has a catchy name of “Banana in a Box”.

This change might look a little strange at first, but it makes it clear that two-way data binding is being used, which is important when building large applications because having a large number of two-way bindings can slow an application down. With Angular 1 it was easy to use two-way bindings even when you only actually needed one-way bindings.

 

 

Advertisement