Data Binding Trong Angular

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