Post
Ask Question

Angular Data Binding

Data Binding

Data binding is a process of coordinating application data values by declaring bindings between sources and target HTML elements. It combines the template parts with components parts and template HTML is bound with markup to connect both sides.

Data binding in Angular 2 can broadly be classified into four types
  • Interpolation
  • Property Binding
  • Event Binding
  • Two Way Data Binding
Interpolation

Interpolation is the most popular and the easiest way of data binding in both Angular 1.x and Angular 2 versions. In Angular 2, it is used in the following way.
 
app.components.ts
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template: `  
  6.     <h1>{{title}}</h1>  
  7.     <h2>Hello: {{name}}</h2>  
  8.     `  
  9. })  
  10. export class AppComponent {  
  11.     title = 'Angular2 Data binding';  
  12.     name = 'C-sharpcorner Members';  
  13. }  
index.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Angular QuickStart</title>  
  5.     <base href="/src/">  
  6.     <meta charset="UTF-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="styles.css">  
  9.   
  10.     <!-- Polyfill(s) for older browsers -->  
  11.     <script src="/node_modules/core-js/client/shim.min.js"></script>  
  12.   
  13.     <script src="/node_modules/zone.js/dist/zone.js"></script>  
  14.     <script src="/node_modules/systemjs/dist/system.src.js"></script>  
  15.   
  16.     <script src="systemjs.config.js"></script>  
  17.     <script>  
  18.       System.import('main.js').catch(function(err){ console.error(err); });  
  19.     </script>  
  20.   </head>  
  21.   
  22.   <body>  
  23.     <app-root>Loading AppComponent content here ...</app-root>  
  24.   </body>  
  25. </html>  
Output
 
 
Property Binding

The primary way to bind data in Angular 2 is through property bindings. This allows you to bind values to properties of an element to modify their behavior or appearance. This can include properties such as class, disabled, href, or textContent.

app.components.ts 

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template:`<div>  
  6. <h1>{{getFullName()}}</h1>  
  7. <img [src]='imagepath'/>  
  8.   
  9.       
  10. </div>`  
  11.   
  12. })  
  13. export class AppComponent {  
  14.     paheHeader: string = null;  
  15.     imagepath: string = 'http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/015654AM.png';  
  16.   
  17.     firstName: string = 'Suresh';  
  18.     lastName: string = 'Kumar';  
  19.   
  20.     getFullName(): string {  
  21.         return this.firstName + '' + this.lastName;  
  22.     }  
  23. }     
 index.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Angular QuickStart</title>  
  5.     <base href="/src/">  
  6.     <meta charset="UTF-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="styles.css">  
  9.   
  10.     <!-- Polyfill(s) for older browsers -->  
  11.     <script src="/node_modules/core-js/client/shim.min.js"></script>  
  12.   
  13.     <script src="/node_modules/zone.js/dist/zone.js"></script>  
  14.     <script src="/node_modules/systemjs/dist/system.src.js"></script>  
  15.   
  16.     <script src="systemjs.config.js"></script>  
  17.     <script>  
  18.       System.import('main.js').catch(function(err){ console.error(err); });  
  19.     </script>  
  20.   </head>  
  21.   
  22.   <body>  
  23.         
  24.     <app-root>Loading AppComponent content here ...</app-root>  
  25.   </body>  
  26. </html>  

Output

 
Event Binding

Front end developers are familiar with various HTML events such as click, blur, focus, etc. through which we can invoke the particular method in order to trigger some operations. Angular 1.x has the defined set of in-built directives which are used for event bindings. E.g., if we want to bind a click event of the HTML button, then we can use the following ng-click directive of Angular 1.x.

Event binding flows data in the opposite direction i.e from an HTML element to a component
Ex

(click)='btnClicked()'

app.components.ts
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template: `<button (click)='onClick'>click me</button>  
  6.                 `  
  7.   
  8. })  
  9. export class AppComponent {  
  10.       
  11.     onClick(): void{  
  12.   
  13.         console.log();  
  14. }  
  15.       
  16. }     
index.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Angular QuickStart</title>  
  5.     <base href="/src/">  
  6.     <meta charset="UTF-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="styles.css">  
  9.   
  10.     <!-- Polyfill(s) for older browsers -->  
  11.     <script src="/node_modules/core-js/client/shim.min.js"></script>  
  12.   
  13.     <script src="/node_modules/zone.js/dist/zone.js"></script>  
  14.     <script src="/node_modules/systemjs/dist/system.src.js"></script>  
  15.   
  16.     <script src="systemjs.config.js"></script>  
  17.     <script>  
  18.       System.import('main.js').catch(function(err){ console.error(err); });  
  19.     </script>  
  20.   </head>  
  21.   
  22.   <body>  
  23.         
  24.     <app-root>Loading AppComponent content here ...</app-root>  
  25.   </body>  
  26. </html>  
Output

 
Two Way Data Binding 

Two-way data binding combines the property and event binding into a single notation using the ngModel directive.We can achieve it by using following way

Ex 

<input [(ngModel)]='name' >

What this is doing behind the scenes is equivalent to -

Ex

<input [ngModel]='name' (ngModelChange)='name=$event'>

app.components.ts
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template: `Name: <input [(ngModel)]='name'/>  
  6. <br/>  
  7. You entered:{{name}}  
  8.                 `  
  9.   
  10. })  
  11. export class AppComponent {  
  12.       
  13.     name:string='suresh'  
  14. }  
  15.       
  16.    

Import ngModel directive from Angular system module called Forms Module

app.module.ts

  1. import { NgModule }      from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { AppComponent }  from './app.component';  
  5.   
  6. @NgModule({  
  7.     imports: [BrowserModule, FormsModule],  
  8.   declarations: [ AppComponent ],  
  9.   bootstrap:    [ AppComponent ]  
  10. })  
  11. export class AppModule { }  
index.html
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Angular QuickStart</title>  
  5.     <base href="/src/">  
  6.     <meta charset="UTF-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="styles.css">  
  9.   
  10.     <!-- Polyfill(s) for older browsers -->  
  11.     <script src="/node_modules/core-js/client/shim.min.js"></script>  
  12.   
  13.     <script src="/node_modules/zone.js/dist/zone.js"></script>  
  14.     <script src="/node_modules/systemjs/dist/system.src.js"></script>  
  15.   
  16.     <script src="systemjs.config.js"></script>  
  17.     <script>  
  18.       System.import('main.js').catch(function(err){ console.error(err); });  
  19.     </script>  
  20.   </head>  
  21.   
  22.   <body>  
  23.         
  24.     <app-root>Loading AppComponent content here ...</app-root>  
  25.   </body>  
  26. </html>  
Output