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.

---

Data Binding Trong Angular

• Bind dữ liệu từ component ra view
• Bind dữ liệu từ component ra thuộc tính của tag HTML
• Bind sự kiện trong DOM với hàm trong component

---

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 một biến hay biểu thức vào một 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