Data Binding là tính năng có sẵn trong Angular giúp gắn 1 biến với 1 vị trí nào đó trong view, nói đúng ra là với 1 node nào đó trong DOM.
Có nhiều cách binding trong Angular, như expression, property, event , two-way. Chúng diễn ra 1 chiều từ component ra DOM, hoặc 1 chiều từ DOM vào component, hoặc cả 2 chiều. Khi ứng dụng thực thi, chức năng Data Binding của Angular sẽ chuyển thông tin một cách tự động.

Bind dữ liệu từ component ra view
Là cách gắn 1 biến hay biểu thức ra 1 vị trí nào đó trong view. Nói đúng hơn là gắn vào trong 1 element nào đó của DOM. Angular sẽ đưa ra element đó giá trị của biến/biểu thức khi có thay đổi .
Cú pháp như sau {{tên_biến/biểu thức}}. Mời xem ví dụ:
<!-- app.component.html -->
<p>Tên sách: <b>{{tensach}}</b> </p>
<p>Giá: <b>{{giasach}}</b></p> <hr>
<div id="thongtin">
<p>Họ tên: {{sinhvien.hoten}}</p>
<p>Ngày sinh: {{sinhvien.ngaysinh}}</p>
<p>Điểm: {{sinhvien.diem}}</p>
</div>
//app.component.ts
export class AppComponent {
tensach="Nói với tuổi 20";
giasach = 25000;
sinhvien = {
hoten:'Mai Anh Tới',
ngaysinh:'2004-3-24',
diem: 8
}
}

Bind dữ liệu từ component ra thuộc tính của tag HTML
Đây là cách bind kiểu property. Với cách này, Angular sẽ đưa giá trị của biến/biểu thức vào 1 thuộc tính của tag HTML. Ví dụ đưa vào các thuộc tính như value, src, href, class, style.color, style.background-color …
Cú pháp bind thuộc tính như sau: <tag [thuoctinhHTML]=”TênBiến”></tag> . Ví dụ:
<p>
<a [href]="linkHocWeb.url" > {{linkHocWeb.ten}} </a> <br>
<a [href]="linkHocWeb.url" target="tlw">
<img [src]="linkHocWeb.logo" width="80">
</a>
</p>
//app.component.ts
export class AppComponent {
tensach="Nói với tuổi 20"; giasach = 25000;
sinhvien = {hoten:'Mai Anh Tới', ngaysinh:'2004-3-24',diem: 8}
linkHocWeb = {
url:'https://longnv.name.vn',
ten:'Thầy Long Web',
logo:'https://longnv.name.vn/wp-content/uploads/2019/09/logo3.png'
}
}
Bind sự kiện trong DOM với hàm trong component
Đây là cách event bind, tức là gắn sự kiện của tag với 1 hàm nào đó trong component. Khi sự kiện xảy ra thì hàm sẽ chạy.
Cú pháp để gắn là thế này: <tag (tênSựkiện) = “tênHàm()”> . Ví dụ:
<p>
Số lượng sách: <input (keyup)="xuly($event)"> .
Tiền: {{thanhtien}}
</p>
(keyup) là sự kiện buông phím trong tag input, khi đó hàm xuly trong component sẽ được gọi.
//app.component.ts
export class AppComponent {
tensach="Nói với tuổi 20"; giasach = 25000;
sinhvien = {hoten:'Mai Anh Tới', ngaysinh:'2004-3-24',diem: 8}
linkHocWeb = {
url:'https://longnv.name.vn', ten:'Thầy Long Web',
logo:'https://longnv.name.vn/wp-content/uploads/2019/09/logo3.png'
}
thanhtien:number=0;
xuly(ev:any){
var t: HTMLInputElement = ev.target;
var sl = Number(t.value);
this.thanhtien = this.giasach* sl;
}
}
Data Binding trong Angular là chủ đề đơn giản nhưng thiết yếu cho bạn. Xem thêm tài liệu ở đây: https://angular.io/guide/binding-syntax. Ngoài ra, nên biết cơ bản về Angular nữa nhé, xem thêm bài này: Tổng quan về Angular Framework