Data Binding in AngularJS 2.0

Hey Guys,

In the previous post we have learned about the Angular JS 2.0 Components.

In this post we’re going to look at data binding in Angular 2. Data binding in Angular 2 works pretty much the same way as data binding in Angular JS, but there are a few key differences. In this post, we’ll take a look at these differences, and the improvements you can look forward to as you start building your own Angular 2 components.

 

The Basics

Take a look at the code snippet below.

<!-- Interpolation -->
<div>Hello, {{name}}!</div>

<!-- Property Binding -->
<div [hidden]="ifMessageHide">Message</div>

<!-- Event Binding -->
<button (click)="doTheStuff()">Click Me</button>

<!-- Bubbling Event Binding -->
<div (^click)=" doTheStuff()">
   <span>Clicks handled by parent. </span>
</div>

<!-- Local Variable -->
<input type="text" #name />
<span>{{name.value}}</span>

<!-- Template Binding (ng-for, ng-if, etc...) -->
<ul>
   <li *ng-for="#c of contacts">{{c.name}}</li>
</ul>

 

 

Property and Event Binding

AngularJS 2 uses different syntax for binding [properties] and (events).

The [] and () bindings are tied directly into the component/DOM element properties and events. This means you can create a binding with any public DOM event or property with no additional coding!

For Example:

<!-- Property Binding -->
<div [hidden]="ifMessageHide">Message</div>

<!-- Event Binding -->
<button (click)="doTheStuff()">Click Me</button>

 

 

Advantages?

In Angular JS (1.x), you have to use built in directives for binding properties and events, or you have to write your own. With Angular 2 however, your API documents for binding to DOM elements are MDN.

For example if you want to bind the color of an <h1> to the value of a textbox, you can do so as follows:

<input type="text" #color (keyup) />
<h1 [style.color]="color.value">
  Color
</h1>

 

This means that if you also want to use a slider to dynamically change the size of the same <h1>, then all you have to do is this:

<input type="range"min="10"max="300"value="32" #size (input) />

<h1 [style.font-size]="size.value + 'px'">

    Color

</h1>

If you want to practice data binding in Angular 2, check out this great example of a TODO list demonstrating two way binding (link below).
https://plnkr.co/3mIUJhTExRiOohTZ2my6

Conclusion

As you can see, although the new data binding syntax in Angular 2 seems little strange at first, it is a much more powerful methodology that offers greater flexibility and speed. And you can use it to bind with custom properties and events on components.

In Angular JS 1.x the two-way binding mechanism is the default mode of operation. This works well for synchronization of a view and a model, but on more complex UI’s containing dozens of controls (where changing a value in one place can result in a chain of binding updates) it can severely impact performance. Angular JS 2 resolves this problem by removing the $SCOPE and syntax change.

In the next tutorial we will learn about the Pipes in Angular JS 2.0