Giới thiệu

Có nhiều thứ cần liên kết dữ liệu hơn là chỉ hiển thị thuộc tính của component. Bài học hôm nay chúng ta sẽ khám phá nhiều tính năng liên kết dữ liệu và biến đổi dữ liệu với pipes (đường ống). Để cung cấp một trải nghiệm người dùng tuyệt vời, chúng ta muốn ràng buộc phần tử DOM vào thuộc tính của component để component có thể thay đổi giao diện khi cần thiết. Chúng ta có thể sử dụng liên kết để thay đổi các phần tử màu sắc hoặc style dự trên các giá trị dữ liệu, như việc chúng ta có thể cập nhật font size dựa trên user preferences hoặc thiết lập một hình ảnh từ một trường trên cơ sở dữ liệu. Hơn thế nữa, chúng ta muốn thông báo về các hành động của người dùng lên DOM để cpmponent có thể phản hồi lại. Ví dụ, chúng ta nhấp chuột lên một nút để ẩn hoặc hiển thị hình ảnh. Và đôi khi, chúng ta muốn liên kết dữ liệu sẽ là hai chiều để có thể nhận được những sự kiện thay đổi của những thuộc tính mà chúng ta hiển thị.

Ở chương này, chúng ta sẽ sử dụng properties binding để thiết lập các thuộc tính phần tử HTML trong DOM. Chúng ta sẽ đi sâu vào việc làm thế nào để xử lý các sự kiện người dùng như khi ta click vào một nút bấm. Và làm thế nào để xử lý với binding 2 chiều. Cuối cùng chúng ta sẽ khám phá làm thế nào để chuyển đổi dữ liệu ràng buộc với pipes.

Chúng ta hãy xem lại kiến trúc ứng dụng một lần nữa, chúng ta đã thực hiện một phần của Product List Component, tuy nhiên component hiện tại mới chỉ hiển thị dữ liệu sản phẩm, mà chưa có bất cứ hành động hay tương tác nào lên những sản phẩm này. Ở bài học này, chúng ta sẽ sử dụng những đặc tính binding để thêm các tương tác vào Product List Component.