Pipe biến đổi dữ liệu để hiển thị trực tiếp trong template, sử dụng toán tử |. Chúng cho phép bạn định dạng giá trị (ngày tháng, tiền tệ, văn bản) mà không thay đổi dữ liệu gốc hay viết logic biến đổi trong component.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Giá trị bên trái được truyền qua pipe; các đối số theo sau dấu hai chấm (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- các pipe áp dụng từ trái sang phải -->
<!-- subscribe một Observable/Promise và tự động unsubscribe -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async đặc biệt quan trọng: nó subscribe một Observable (ví dụ kết quả HTTP), render giá trị phát ra, và tự động unsubscribe khi component bị hủy — ngăn ngừa memory leak mà không cần quản lý subscription thủ công.
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// cách dùng: {{ longText | truncate:50 }}
Pure (mặc định): chỉ chạy lại khi THAM CHIẾU đầu vào thay đổi → hiệu quả (được cache)
Impure: chạy lại trong mỗi chu kỳ change detection → dùng dè dặt (ví dụ lọc)
Pipe pure được cache và chỉ tính lại khi đầu vào thay đổi — khiến chúng hiệu năng cao.
Pipe giữ việc định dạng dữ liệu ở dạng khai báo và đặt trong template nơi nó thuộc về, tách biệt khỏi logic component — tái sử dụng được, nối chuỗi được, và (khi pure) hiệu quả.
Các pipe có sẵn bao quát các định dạng phổ biến, pipe tùy chỉnh xử lý các biến đổi riêng của ứng dụng, và pipe async là cách hiển thị dữ liệu Observable theo lối idiomatic, không rò rỉ — một pattern bạn sẽ dùng liên tục trong Angular.