Angular Data Binding

Suresh Kumar
7y
1.3k
0
2

Blog

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

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<h2>Hello: {{name}}</h2>
`
})
export class AppComponent {
title = 'Angular2 Data binding';
name = 'C-sharpcorner Members';
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app-root>Loading AppComponent content here ...</app-root>
</body>
</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

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:`<div>
<h1>{{getFullName()}}</h1>
<img [src]='imagepath'/>
</div>`
})
export class AppComponent {
paheHeader: string = null;
imagepath: string = 'http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/015654AM.png';
firstName: string = 'Suresh';
lastName: string = 'Kumar';
getFullName(): string {
return this.firstName + '' + this.lastName;
}
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app-root>Loading AppComponent content here ...</app-root>
</body>
</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

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<button (click)='onClick'>click me</button>
`
})
export class AppComponent {
onClick(): void{
console.log();
}
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app-root>Loading AppComponent content here ...</app-root>
</body>
</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

What this is doing behind the scenes is equivalent to -

Ex

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

app.components.ts