Trong bài viết này, hãy cùng tìm hiểu định nghĩa về Pipes và cách dùng Pipes trong chuyển đổi dữ liệu nhé! 

Pipes là một tính năng của Angular và là một framework phát triển ứng dụng web bằng ngôn ngữ TypeScript. Pipes cho phép bạn xử lý và biến đổi dữ liệu một cách dễ dàng trong các template của Angular. Hiểu đơn giản, pipe là một function nhận input mà chúng ta truyền vào và output ra giá trị mình mong muốn.

Các ứng dụng thông thường đều bao gồm các bước cơ bản:

1. Lấy dữ liệu từ server bằng cách gọi API call lên server để lấy dữ liệu theo thời gian thực.
2. Sau đó thực hiện chuyển đổi dữ liệu nhận được từ API, ví dụ như bạn nhận được giá trị là 2023-12-15T09:00:00.000Z dưới định dạng ISO. Nhưng trên UI mình phải show ở format dễ đọc cho user Dec 15, 2023.
3. Và hiển thị dữ liệu lên UI cho người dùng.

Pipes sẽ làm nhiệm vụ thứ 2, là chuyển đổi dữ liệu trước khi show cho người dùng. Ví dụ giữa client và server khi trao đổi thông tin liên quan đến thời gian, thường dùng ISO format “2020-06-24T09:00:00.000Z”, tương đương với ngày 24 tháng 6, 5h chiều (giờ Singapore).

Tuy nhiên khi hiển thị, chúng ta không thể hiển trị trực tiếp ISO string cho người dùng vì không phải ai cũng là developer để hiểu được đó là gì. Vậy nên chúng ta cần transform ISO string ở trên dưới dạng mà người dùng có thể hiểu được, ví dụ Jun 24, 2020, 5:00:00 PM.

Để làm được việc này bạn có nhiều lựa chọn, nhưng thường thì có hai lựa chọn trong Angular:

1. Viết một function, nhận date input và return output.
2. Viêt một pipe, cũng nhận input và return output.

Điểm lợi thế của Pipe là dễ tái sử dụng. Vì thông thường sẽ có khá nhiều page cần hiển thị date time, việc dùng Pipe sẽ đem lại nhiều ưu điểm hơn là function.

Dùng pipe như thế nào?

Angular có cung cấp sẵn một số pipes thường dùng trong package @angular/common chẳng hạn như UpperCase, LowerCasePipe, DecimalPipe, DatePie…. Như đã nói ở trên, pipe sẽ nhận vào input và output ra một giá trị mình mong muốn.

Để sử dụng một pipe trong Angular, bạn cần gọi pipe bằng cách sử dụng ký hiệu | trong template của bạn. Ví dụ, để hiển thị một chuỗi dạng in hoa, bạn có thể sử dụng UpperCasePipe như sau:

<p>{{ ‘hello world’ | uppercase }}</p>

Kết quả hiển thị sẽ là HELLO WORLD. Ngoài ra, bạn cũng có thể chuyển đổi ngày tháng sử dụng DatePipe. Ví dụ:

<p>{{ today | date:‘yyyy-MM-dd’ }}</p>

Trong đó today là một biến JavaScript chứa ngày hiện tại, kết quả sẽ được hiển thị dưới dạng 2023-07-31.

Chú ý: Phần giữa hai dấu ngoặc nhọn {{ }} bao gồm variable bạn muốn hiển thị và dấu xổ dọc | là pipe operator, sau đó là tên của pipe bạn đã định nghĩa. Tất cả pipe đều hoạt động theo cách này.

Cú pháp: {{ interpolated_value | pipe_name }}

Pipe và parameters

Trong Angular, pipes có thể nhận tham số để thực hiện các biến đổi dữ liệu tùy chỉnh. Để truyền tham số cho pipe, bạn cần sử dụng cú pháp: sau tên pipe và truyền giá trị tham số sau đó. Như ví dụ date ở trên, date là tên của pipe, và ‘yyyy-MM-dd’ là giá trị của tham số truyền vào. Tham số này định dạng ngày tháng để hiển thị. Đó cũng là cú pháp để pass parameter cho pipe.

Cú pháp: {{ interpolated_value | pipe_name:parameter1:parameter2:…:parameterN }}

Bạn có thể truyền vào số lượng parameter không giới hạn.

Chaining pipe

Pipes cho phép chúng ta dùng nhiều pipe để chuyển đổi một giá trị. Chaining pipe sẽ chạy lần lượt qua các pipe từ trái qua phải. Sau khi có output pipe_name_1, thì output này sẽ được xử lý qua pipe_name_2 rồi tương tự đến pipe_name_n để ra output cuối cùng hiển thị lên UI

Cú pháp: {{ interpolated_value | pipe_name_1 | pipe_name_2 |… | pipe_name_n }}

{{ now | date:‘medium’ | uppercase}}

Kết quả hiển thị sẽ là JUN 24, 2020, 5:00:00 PM

Các pipe có sẵn đi kèm với Angular (built-in pipe)

Angular cung cấp sẵn khá nhiều pipes để có thể sử dụng được khi import CommonModule từ package @angular/common. Dưới đây là một số pipe thường sử dụng:

Pipe	Mô tả
	Formats a date.
	Convert text sang chữ hoa.
	Convert text sang chữ thường.
	Hiển thị giá trị tiền tệ.
	Hiển thị số thập phân
	Hiển thị phần trăm %
	Hiển thị json
	Hiển thị value của observable và tự động unsubscribe khi view được destroy

Custom pipe

Số lượng pipe có sẵn đó cũng không thể nào đáp ứng được hết các nhu cầu trong các ứng dụng khác nên chúng ta cũng hoàn toàn có thể viết các custom pipe theo nhu cầu thực tế. Để viết một pipe dành riêng cho nhu cầu của từng dự án, cần thực hiện theo hai bước sau.

Bước 1: Tạo class implement Interface .

Interface PipeTransform là interface có sẵn trong @angular/core chỉ bao gồm một method duy nhất tên là transform. Đây là interface PipeTransform cần implement.

interface PipeTransform {     transform(value: any, …args: any[]): any;   }

Tạo một class sau khi đã implement PipeTransform: 

export class CustomPipe implements PipeTransform {     transform(resourceId: string): string {       return resourceId ? ‘Edit’ : ‘Add’;     }

Nội dung method transform ở đây rất đơn giản. Nếu resourceId là true thì trả về Edit, nếu không thì trả Add.

Bước 2: Thêm Pipe decorator cho class đã implement PipeTransform

Giống như component có decorator @Component. Pipe cũng có decorator @Pipe

@Pipe({     name: ‘appCustomPipe’,   })   export class CustomPipe implements PipeTransform {     transform(resourceId: string): string {       return resourceId ? ‘Edit’ : ‘Add’;     }   }

Khi thêm Pipe decorator thì có một thuộc tính bắt buộc, đó chính là name – tên của pipe. Chúng ta đặt là appCustomPipe. Lưu ý rằng bạn phải đặt CustomPipe trong mảng declarations ở module tương ứng mà bạn muốn sử dụng. Nếu không Angular sẽ báo lỗi. Chúng ta có thể dùng pipe appCustomPipe như những pipe thông thường bình thường.

<h2 class=“ibox-title”>{{ userId | appCustomPipe }} User</h2>

Chú ý: Cách đặt tên cho pipe và class

• Tên class theo quy tắc UpperCamelCase, tức là viết hoa các chữ cái đầu của từng từ
• Tên của pipe sẽ theo quy tắc camelCase, tức là chữ cái đầu của từ đầu tiên viết thường. Các chữ cái đầu của các từ tiếp theo viết hoa.
• Không được dùng dấu gạch ngang – cho tên

Custom pipe parameters

Vẫn là ví dụ trên, nhưng ở một vài trang có yêu cầu là khi mở form “Thêm mới”  sẽ không hiện tiêu đề là “Thêm mới” nữa mà đổi lại thành “Tạo mới”. Còn form “Sửa” thì đổi lại thành “Cập nhật”. Chúng ta hoàn toàn có thể truyền vào hai parameters tương ứng với hai tiêu đề này. Và nếu mặc định không truyền mình sẽ đặt lại là “Thêm mới” và “Sửa” tương ứng. Code có thể được viết lại như sau:

@Pipe({     name: ‘appCustomPipe’,   })   export class CustomPipe implements PipeTransform {     transform(         resourceId: string,         addText: string = “Thêm mới”,         editText: string = “Sửa”         ): string {             return resourceId ? editText : addText;         }   }

Và code trên giao diện được thay đổi thành

{{ userId | appCustomPipe:“Tạo mới”:“Cập nhật”}}

Phương thức chuyển đổi dữ liệu có thể nhận vào nhiều tham số. Trong đó: 

• Tham số đầu tiên chính là giá trị của của biến khi mình dùng pipe. Ví dụ {{ userId | appCustomPipe }} thì transform(resourceId: string),  resourceId chính là giá trị của userId được truyền vào.

• Khi truyền các tham số khác bằng dấu hai chấm : thì biến tương ứng trong Phương thức transform sẽ là từ biến thứ 2 trở đi. Ví dụ như {{ userId | appTitle:”Tạo mới”:”Cập nhật”}} thì “Tạo mới” sẽ là giá trị của addText: string và “Cập nhật” sẽ tương ứng với editText: string

Thông qua một vài ví dụ đơn giản phía trên mong là sẽ giúp các bạn hiểu hơn về ý nghĩa và các cách sử dụng pipe trong việc lập trình Angular. Chúc các bạn thành công!

Bộ môn Công nghệ thông tin
Trường Cao đẳng FPT Mạng cá cược bóng đá cơ sở Hà Nội