Binding là gì

     

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.Bạn đang xem: Binding là gì

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).

Bạn đang xem: Binding là gì

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.

Xem thêm: Biếc Rờn Là Gì - Nghĩa Của Từ Biếc

Ví dụ ta có component là

1234567891011import { Component } from "angular/core"; Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: })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:

1Welcome, { { 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-source”
123 ="title">

Example 1

="isDisabled">I am disabled
1234567891011121314import { Component } from "angular/core"; Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: })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 (click)="onSave()">Save
12345678910111213141516import { Component } from "angular/core"; Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: })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.

Xem thêm: Âm Thanh Dsd Là Gì ? Chuẩn Nhạc Cao Nhất Hiện Tại Dsd, Dxd Là Gì

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.

1234

Example 2

type="text" name="value" ="value"> You entered

(click)="clearValue()">Clear
12345678910111213141516import { Component } from "angular/core"; Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: })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