Interpolation directive trong Angular

Khi tạo mới một Angular project bất kỳ, các bạn sẽ thấy mặc định trong tập tin app.component.html, một cái, mà trong bài viết tìm hiểu về Component của Angular mình gọi nó là placeholder {{ title }}, thật ra tên gọi của nó phải là Interpolation directive, dùng để hiển thị dữ liệu từ class Component ra trong tập tin template của Component này. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu thêm về Interpolation này các bạn nhé!

Đầu tiên, mình sẽ tạo mới một Angular project để làm ví dụ:

Interpolation directive trong Angular

Để đơn giản, mình sẽ sử dụng AppComponent trong tập tin src/app/app.component.ts với thuộc tính template cho decorator @Component như sau:

Kết quả:

Interpolation directive trong Angular

Như các bạn thấy để khai báo một Interpolation directive trong Angular, chúng ta sẽ sử dụng hai dấu ngoặc nhọn, bên trong chúng có thể là tên của một property trong Component

Như ví dụ trên của mình, title là một property trong class AppComponent và Angular sẽ evaluate Interpolation này với giá trị của property title.

Chúng ta cũng có thể lấy các thông tin liên quan của property title trong Interpolation luôn, ví dụ như chiều dài:

Hay in hoa giá trị của property title:

Kết quả:

Interpolation directive trong Angular

Các bạn cũng có thể thực hiện các phép tính, nối chuỗi với Interpolation directive.

Ví dụ như sau:

Kết quả:

Interpolation directive trong Angular

Hay gọi một phương thức có return value trong Component với Interpolation directive:

Kết quả:

Interpolation directive trong Angular

Add Comment