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ụ:
Để đơ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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div>Hello {{ title }}</div> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-interpolation'; } |
Kết quả:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div>Hello {{ title.length }}</div> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-interpolation'; } |
Hay in hoa giá trị của property title:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div>Hello {{ title.length }}</div> <div>Hello {{ title.toUpperCase() }}</div> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-interpolation'; } |
Kết quả:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div>{{ 2 + 5 }}</div> <div>{{ "Hello, " + "Khanh" }}</div> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-interpolation'; } |
Kết quả:
Hay gọi một phương thức có return value trong Component với Interpolation directive:
|
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', template: ` <div>{{ "Hello, " + getName() }}</div> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-interpolation'; getName() { return 'Huong Dan Java'; } } |
Kết quả:
