Trong Angular, Pipes là các công cụ được sử dụng để chuyển đổi dữ liệu hiển thị trên template một cách linh hoạt và dễ dàng. Pipes nhận một giá trị đầu vào và trả về một giá trị đầu ra sau khi đã được biến đổi. Angular cung cấp một số Pipes có sẵn như AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, JsonPipe, LowerCasePipe, PercentPipe, SlicePipe, TitleCasePipe, và UpperCasePipe. Một điểm đáng chú ý là Angular không bao gồm FilterPipe hoặc OrderByPipe như trong AngularJS[1].
Pipes trong Angular được phân thành hai loại chính: pure pipe và impure pipe. Pure pipe chỉ thực hiện thay đổi khi giá trị đầu vào thay đổi, phù hợp với các đối tượng không thay đổi (immutable objects) hoặc các kiểu dữ liệu nguyên thủy như chuỗi, số, boolean. Trong khi đó, impure pipe thực hiện thay đổi mỗi chu kỳ của Change Detection, tức là mỗi khi có sự thay đổi trong state của ứng dụng để cập nhật dữ liệu một cách đồng bộ[1].
Để tạo một Custom Pipe trong Angular, bạn cần thực hiện theo các bước sau:
Tạo một class và trang trí (decorate) nó với decorator @Pipe, trong đó cần chỉ định tên của pipe thông qua thuộc tính name.
Class này cần implement interface PipeTransform và phương thức transform của interface này, nơi bạn sẽ định nghĩa cách biến đổi dữ liệu từ đầu vào sang đầu ra.
Sau khi đã tạo xong, bạn cần đặt custom pipe này vào mảng declarations của module tương ứng mà bạn muốn s...
