two-way data binding

Angular2: Data Binding

codef0rmer Angular2, Javascript , , , ,

In the previous article, we had explored how dependency injection works in Angular2 compared to Angular1. In this article, I will walk you through the one-way vs two way data binding and how its different but quite similar in Angular2.

Angular1

As usual, we’ll quickly go through the Angular1 example. Let’s take a simple example (HTML) from my free ebook on Angular1 Directives that explores how data binding works in Angular1. Notice we have not written a single line of Javascript code to enable the data binding in the following example:

<br>
&lt;html ng-app="App"&gt;<br>
&lt;head&gt;<br>
  &lt;title&gt;Two way Data Binding with Form Controls&lt;/title&gt;<br>
  &lt;script src="../bower_components/angular/angular.js"&gt;&lt;/script&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
  &lt;input type='checkbox' ng-model='choose' /&gt;<br>
  &lt;div&gt;{{choose}}&lt;/div&gt;</p>
<p>  &lt;button ng-click="choose=!choose"&gt;Toggle Checkbox&lt;/button&gt;</p>
<p>  &lt;script type="text/javascript"&gt;<br>
    angular.module('App', []);<br>
  &lt;/script&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>

Now that we’ve a working demo, let us migrate it to Angular2.

Angular2

Let us create a typescript file twoway-binding.ts first to lay our main component.

<br>
import { NgModule, Component } from '@angular/core';<br>
import { FormsModule } from '@angular/forms';<br>
import { BrowserModule } from '@angular/platform-browser';<br>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</p>
<p>@Component({<br>
  selector: 'ng-app',<br>
  template: `<br>
    &lt;input type='checkbox' [(ngModel)]='choose' /&gt;<br>
    &lt;div&gt;{{choose}}&lt;/div&gt;<br>
    &lt;button (click)="choose=!choose"&gt;Toggle Checkbox&lt;/button&gt;<br>
  `<br>
})<br>
export class DataBindingComponent {<br>
  choose: boolean = true;<br>
}</p>
<p>@NgModule({<br>
  declarations: [DataBindingComponent],<br>
  imports:      [BrowserModule, FormsModule],<br>
  bootstrap:    [DataBindingComponent]<br>
})<br>
export default class MyAppModule {}</p>
<p>platformBrowserDynamic().bootstrapModule(MyAppModule);<br>

We are already familiar with Component, ES6 Class, bootstrap, etc. jargons from the first article as those are the backbone of Angular2. The only difference here is the template with data-binding expressions.

In Angular1, the two-way data binding was enabled by default, for one-way data binding the expression should be wrapped in {{choose}}. Also the attribute name supposed to be hyphenated. However, in Angular2 the attribute should be in camel-case with subtle differences that affect the way data flows:

  1. [Component -> Template]
    To show a model in a template which was defined in the component, use square-bracket or double-curly syntax a.k.a. One Way Binding.
  2. (Template -> Component)
    To broadcast an event from a template in order to update the model in the component, use round-bracket syntax a.k.a. One Way Binding.
  3. [(Component -> Template -> Component)]
    To have both behaviors simultaneously, use round-bracket inside square-bracket (or banana-in-the-box) syntax a.k.a. Two Way Binding.

This clearly means that the two-way binding in Angular2 is opt-in and can be enabled by importing BrowserModule to plug it in the NgModule.

In the above example, we want to toggle the expression choose from the template to the component using (click) when the button is clicked and update the checkbox in the template immediately using [ngModel]="choose". We also want to update the model choose in the component if the checkbox is toggled manually using [(ngModel)]="choose". Do not get confused with one-time binding in Angular1 i.e. {{::choose}} where the model used to be freezed once evaluated, there is no such thing in Angular2.

Now let us update HTML markup as usual.

<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
  &lt;title&gt;Angular2: Two way Data Binding with Form Controls&lt;/title&gt;<br>
  &lt;meta charset="UTF-8"&gt;<br>
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</p>
<p>  &lt;!-- 1. Load libraries --&gt;<br>
  &lt;script src="../node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;<br>
  &lt;script src="../node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;<br>
  &lt;script src="../node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;<br>
  &lt;script src="../node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;</p>
<p>  &lt;!-- 2. Configure SystemJS --&gt;<br>
  &lt;script src="../systemjs.config.js"&gt;&lt;/script&gt;<br>
  &lt;script&gt;<br>
    System.import('ch01/twoway-binding').catch(function(err){ console.error(err); });<br>
  &lt;/script&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
  &lt;!-- 3. Display the application --&gt;<br>
  &lt;ng-app&gt;Loading...&lt;/ng-app&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>

Wrap up

Remember, because of the simplified template syntax in Angular2, you can do lot of things easily such as,

  • {{textContent}} becomes [textContent]="textContent"
  • ng-bind-html="html" becomes [innerHTML]="html"
  • ng-mouseup="onMouseUp()" becomes (mouseup)="mouseUp()"
  • my-custom-event="fire()" becomes (customEvent)="fire()"

Fewer templating syntax means Faster learning! Head over to a live data binding in action.

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.
Advertisement