Sử dụng Data binding trong Angular

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách sử dụng data binding là như thế nào?

Data binding là gì

Databinding là kỹ thuật nơi dữ liệu được đồng bộ giữa component và tầng view (template file html). Ví dụ khi người dùng cập nhật data ở tầng view thì Angular cũng cập nhật giá trị đó ở component.

Data binding trong Angular có thể chia ra làm 2 nhóm. Đó là one way binding (binding 1 chiều) và two way binding (binding 2 chiều).

One way binding là gì

• One way binding thì dữ liệu được truyền 1 chiều. Có thể từ view sang component hoặc ngược lại từ component sang view.

• Từ component sang view chúng ta sử dụng Interpolation & Property Binding để hiển thị dữ liệu như sau:
• Chúng ta sử dụng để hiển thị giá trị từ component sang view.

Ví dụ ta có component là

1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName= 'Sachin';
  lastName=”Tendulkar”
}

Như vậy dữ liệu trong component này có là firstName và lastName. Ta hiển thị bên View như sau:

1
Welcome, { { firstName } } { { lastName } }

• Ngược lại nếu từ View truyền dữ liệu về component thì ta dùng Property binding như sau [binding-target]=”binding-source”

1
2
3
<h1 [innerText]="title"></h1>
<h2>Example 1</h2>
<button [disabled]="isDisabled">I am disabled</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title="Angular Property Binding Example"
  
  //Example 1
  isDisabled= true;
 
}

• Event Binding chúng ta sử dụng để bind các sự kiện như click chuột, sự kiện bàn phím etc. Chúng ta sử dụng cú pháp sau để thực hiện sự kiện khi chuột click vào nút Save. Sau đó nó sẽ gọi hàm onSave bên class component.

1
<button (click)="onSave()">Save</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName= 'Sachin';
  lastName=”Tendulkar”

  onSave() {
    //xử lý nút Save
  }

}

Two way binding là gì

Binding 2 chiều có nghĩa là chúng ta thay đổi dữ liệu từ component qua view và ngược lại từ view chúng ta thay đổi dữ liệu.

2 way binding thì hữu dụng khi mình làm form. Chúng ta sử dụng ngModel để thực hiện việc binding 2 chiều.

1
2
3
4
<h2>Example 2</h2>
<input type="text" name="value" [(ngModel)]="value">
<p> You entered </p>
<button (click)="clearValue()">Clear</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  value="";

  clearValue() {
   this.value="";
 }

}

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments