Thu, 21 Jan 2016 10:04:05 GMT

Angular 2.0 is still beta (I’m using beta.1 here). If you find any difficulties to implement those what's written in the article (though I will try to keep the article updated always), please post a comment about that. Refer to the github repo for working examples.

How data binding works in Angular 2

One way binding

import {Component, View} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; @Component({ selector: 'oneway-binding-input', }) @View({ directives: [FORM_DIRECTIVES] template: ` Simple one way binding Input value is : {{myValue}} Change to random ` }) export class OneWayDataBinding { myValue = 'Paul Shan'; changeToRandom(){ var aNum = Math.random(); this.myValue = aNum; } }

Two way binding

import {Component, View} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; @Component({ selector: 'twoway-binding-input', }) @View({ directives: [FORM_DIRECTIVES] template: ` Simple two way binding Input value is : {{myValue}} Change to random ` }) export class TwoWayDataBinding { myValue = 'Paul Shan'; changeToRandom(){ var aNum = Math.random(); this.myValue = aNum; } }

Inter component one way binding

inner component

import {Component, View, Input} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; @Component({ selector: 'inner-component-db', }) @View({ directives: [FORM_DIRECTIVES] template: ` Thhis is nested inner Input value is : {{hisValue}} ` }) export class InnerComponentDataBinding { @Input() hisValue:any; }

outer component

import {Component, View} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; import {InnerComponentDataBinding} from './inner.ts'; @Component({ selector: 'outer-component-db-1', }) @View({ directives: [FORM_DIRECTIVES, InnerComponentDataBinding] template: ` Nested Components one way This is nested outer Input value is : {{myValue}} ` }) export class OuterComponentDataBinding1 { myValue = "Paul Shan"; }

<inner-component-db [(hisValue)]="myValue"></inner-component-db>

Inter component two way binding

inner component

import {Component, View, Input, Output, EventEmitter} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; @Component({ selector: 'inner-component-db', }) @View({ directives: [FORM_DIRECTIVES] template: ` Thhis is nested inner Input value is : {{hisValue}} ` }) export class InnerComponentDataBinding { @Input() hisValue:any; @Output() hisValueChange = new EventEmitter(); onHisValueChang(element){ this.hisValue = element.value; this.hisValueChange.next(this.hisValue) } }

outer component

import {Component, View} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; import {InnerComponentDataBinding} from './inner.ts'; @Component({ selector: 'outer-component-db-2', }) @View({ directives: [FORM_DIRECTIVES, InnerComponentDataBinding] template: ` Nested Components two way This is nested outer Input value is : {{myValue}} ` }) export class OuterComponentDataBinding2 { myValue = "Paul Shan"; onHisValueChange(val){ this.myValue = val; } }

Since the dawn of JavaScript frameworks, data-binding played the role of wazir (queen in chess) to make the frameworks popular. Data binding, especially two way data binding reduces the pain of manual updates in DOM drastically. But what if I say Angular 2.0 doesn’t have two way data binding? Shocked? But this is true. Although you can do two way data binding using Input and Output variables, but that bind everything two way by default concept is no more there. Two way data binding is a sugar. Data will always flow in a single direction. Which is a good step towards performance boost.In angular 2 everything is a component. Thus, the entire app structure is a component tree. Every single component has a Change Detector attached to it which keeps track of the bindings in its template. {{myValue}} and [hisValue]=”something” kind of bindings are generally handled by it and the change detection flows from root component to leaf components. To make the data flow in reverse direction (leaf to root), angular 2 has a concept of event emitter. Each component can use an event emitter which can be used to notify its parent about a property change of it. Once the parent got notified about the change, it can handle things accordingly. This is how the reverse way data flow is done in Angular 2.0, which can be called the two way binding. There are concepts of mutable and immutable objects in Angular 2 to minimize the number of checks for change which will be discussed in a separate article in Void Canvas.The square brackets do it all for you. The example given above will change the input value whenever the myValue changes. But if you change the input value, it won’t effect the myValue. The reason is data flows in a single direction. However you can do the exact reverse thing using events If you went through our Angular 2 templates article, you will find a similarity. The first brackets are used with events (keyUp, change, keyDown these are example of default events). So how things are done in the given example is, square brackets handles the one way data flow and due to the first brackets the change detector’s emitted event is catched and the passed value is set. Hope you got the syntax already, but if you are still not clear about the mechanism of data flow, don’t worry it will be cleared once you start with the inter component data binding in the next paragraph.As Angular 2.0 is all about components, you will often (or always) face the scenario of inter component data communication; both one and two way. Handling one way is comparatively easier as data by default flows from root to leaf, but reversing the flow is where you need to put efforts using the event emitters.The Input variable in Angular 2 automatically update data-bound properties during change. Using this we’ve created an inner component where hisValue is an Input variable. The outer components uses inner component in it and while using it also binds the hisValue of inner component with its own property myValue. Now you will see if you change the myValye of outer component by that inputbox, the value in inner component is also changing. But the vice versa is not true. If you change it in the inner component’s inputbox, the outer components value doesn’t get effected. In the two way binding example above, we’ve seen if we provide a pair of round brackets (or first brackets), it does the two way binding for us. So will the same approach work here if I make the template in outer property something likeWell, it won’t work. In the data binding example it worked because Angular 2.0 by default set an event emitter in input component. But inner is our self created component. So we ourselves need to create the event emitter with Output variable to make the data flow in the reverse way. The next paragraph is explaining this.So now I’ve provided that pair of round brackets in my outer component and have made some modifications in inner component. I’ve created an event emitter named hisValueChange, which emits an event inside the onHisValueChang function, with the updated value. And onHisValueChang is triggered on keyUp event of the inputbox in inner.