Data Binding In Angular 2

Introduction

Data binding is one of the most powerful features of software development technologies. Data binding is the connection bridge between View and the business logic (View Model) of the application. Data binding in Angular is the automatic synchronization between Model and the View. When the Model changes, the Views are automatically updated and vice-versa.

There are many ways to bind the data in Angular. Following are the types of data binding in Angular 2.

• Interpolation
• One-way binding (unidirectional)
• Two-way binding
• Event binding

Interpolation

This is the easiest way of data binding in AngularJS. This is same as Expressions  in Angular 1.x. In interpolation, we need to supply property name in the View template, enclosed in double curly braces, e.g. {{name}}. It is used for one-way binding (Component class to View only).

In the following example, I have defined one property called "name" in Component Class and it is displayed on View template by using interpolation.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/databinding.html'
})
export class AppComponent {
    name = 'C# Corner';
}

databinding.html

<h4>Data binding in Angular 2 Application</h4>
<div>
    <h5>Interpolation Example</h5>
    Hello {{name}} !
</div>

Output



One-way binding

In Angular 2, one-way data binding directive is replaced with [property]. The ng-bind directive is used for one-way binding in Angular 1.x. Angular 2.0 uses HTML DOM element property for one-way binding. The square brackets are used with property name for one-way data binding in Angular 2. For example, if we want one-way binding between Model property and template View for textbox, we need to use [value].

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/databinding.html'
})
export class AppComponent {
    name = 'C# Corner';
    welcomeText = 'Welcome Jignesh!'
}

databinding.html

<div>
    <h5>One way binding Example</h5>
    Hello <span [innerText] = "name" ></span>!
    <br/><br/>
    <input type = 'text'  [value]="welcomeText" />
</div>

Output



Two-way binding

The ng-model directive is used for two-way data binding in Angular 1.x, but it is replaced with [(ngModel)] in Angular 2.0. The ngModel directive is part of a built-in Angular module called "FormsModule". So, we must import this module in to the template module before using the ngModel directive.

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
}

databinding.html

<div>
    <h5>Two way binding Example</h5>
    Enter you Name:  <input [(ngModel)]="enterName"  />
    <br/><br/>
    <span> WelCome {{enterName}} ! </span>
</div>

Output



Two-way binding without ngModel directive

Angular 2 has a feature called "template reference variables". With this feature, we are able to have direct access to an element. The template reference variable is declared by preceding an identifier with a hash/pound character (#).

In the following example, we have declared a template reference variable named "txtName" on the input element. This variable is in reference to the input element. So, we can get the value property of the input element and display it with interpolation.

Here, template is completely self-contained and it does not bind to the component. This solution will not work unless we bind to the element’s event. Angular only updates the bindings if something is done in response to asynchronous events, like keystrokes. This is the reason we bind keyup event to input element and we do nothing with this event. So, we are binding the number 0 with the event.

databinding.html

<div>
    <h5>Two way binding (without ngModel directive) Example</h5>
    Enter you Name: <input  #txtName  type = "text"  (keyup)="0" />
    <br/><br/>
    <span> WelCome {{txtName.value}} ! </span>
</div>

Output



Event Binding

Angular 2.0 directly uses the valid HTML DOM element events. For example, ng-click is now replaced with (click). The round brackets (parentheses) are used with DOM event name for event binding in Angular 2.

In the following example, I have defined button click event and on button click, I have written the message on screen.

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'test-app',
  templateUrl: './app/databinding.html'
})
export class AppComponent {
    messageText = '';
    onClickMe() {
        this.messageText = "Hi Reader!";
    }
}

databinding.html

<div>
    <h5>Event binding Example</h5>
     <button (click)="onClickMe()">Click me!</button>
    <br/><br/>
    <span> {{messageText}} </span>
</div>

Conclusion - This article helps us understand the Data Binding approaches in Angular 2.