Xây dựng những Custom Pipe.

Như chúng ta đã thấy trong chương trước, chúng ta sử dụng những pipes để biến đổi những thuộc tính ràng buộc trước khi hiển thị chúng trên một view. Angular có sẵn pipe đó được xây dựng để biến đổi một giá trị hoặc một danh sách dữ liệu lặp lại. Đó là những gì chúng ta bàn ở chương trước. Trong chương này, chúng ta muốn xây dựng một custom pipe của riêng chúng ta. Đoạn code xây dựng một custom pipe dưới đây có thể sẽ trông rất quen thuộc.

Ở ví dụ này, chúng ta sẽ xây dựng một custom pipe có nhiệm vụ lọc những sản phẩm (value: IProduct[]) theo filterBy và trả về những sản phẩm có cùng kiểu dữ liệu IProduct.

Chúng ta cần lưu ý, trước class chúng ta thêm một pipe decorator để định nghĩa class này là một pipe, thuộc tính name trong decorator cũng chính là tên của pipe sẽ được dùng. Dĩ nhiên chúng ta cũng không quên import Pipe, và PipeTransform từ @angular/core để class có thể implement chúng.

Interface PipeTransform sẽ yêu cầu class phải implement phương thức transform. Chúng ta sẽ thực hiện chuyển đổi dữ liệu trong hàm này.

Sau khi đã định nghĩa một custom pipe, để sử dụng nó chúng ta làm tương tự như những built-in pipes mà Angular cung cấp. Ở template chúng ta sẽ sử dụng custom pipe như dưới đây.

Bây giờ hãy nhìn lại một chút toàn bộ kiến trúc mà ứng dụng chúng ta đang xây dựng. Chúng ta vừa tạo ra một ProductFilterPipe, do đó để có thể sử dụng nó trong AppModule, ngoài những bước trên chúng ta cần phải khai báo cho AppModule biết về Custom Pipe mới này.

Cách mà chúng ta sẽ khai báo cho AppModule như đoạn code dưới đây.