Learning Angular2 From Zero (Entry02)

Learning Angular2 from Zero (02) Data Binding

Start

This entry is mainly covered the Angular2 data binding, which are One-way binding and Two-way binding.

1. One way binding

There are three ways to implement one way binding, which are Interpolation, DOM property binding and bind-DOM. Those three ways are technically equal. Just like below.

1
2
3
4
5
6
7
8
9
10
11
12
13
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<img src="{{ imageUrl }}" /> // Interpolation, recommend use to load dynamic value
<img [src]="imageUrl" /> // DOM property binding
<img bind-src="imageUrl" /> // bind-DOM, rare to use
`
})
export class AppComponent {
imageUrl = "path to the image";
}

If the component property changed, the value of DOM will change automatically. BUT if the value of DOM changed, the component property will not changed corresponding. This is called One-way bind.

2. Class Binding & Style Binding

Class binding is aim to add additional class to DOM elements based on some condition, Style binding is in the same process. Below is an example to add active class to the button and background color to inline style.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<button
class="btn btn-primary"
[class.active]="isActive" // The active class will be add when isActive is true
[style.backgroundColor]="isActive ? 'blue' : 'gray'" // The background color will change based on isActive
>
Submit</button>
`
})
export class AppComponent {
isActive = true;
}

3. Event Binding

Event binding is handle event rise from the DOM, like click, mouthmove, hover and etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<div (click)="onDivClick()">
<button (click)="onClick($event)">Submit</button> // Event binding
</div>
`
})
export class AppComponent {
onDivClick() {
console.log("Div clicked");
}
onClick($event) {
$event.stopPropagation(); // Use to ignore parent DOM event
console.log("Clicked", $event);
}
}

4. Two-way Binding

Two-way binding is actually the combination of property binding and event binding. There are three ways to realise it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<input type="text" [value]="title" (input)="title = $event.target.value" /> // Original realise
<input type="text" [(ngModel)]="title /> // Recomment to use
<input type="text" bindon-ngModel="title" />
Preview: {{ title }}
`
})
export class AppComponent {
title = "Hello world";
}

If the input value changed, the Preview will changed at the same time (Means the compoment property value changed as well).

Reference

Github

All related code could find in Github