Pipe mentransformasi data untuk paparan terus dalam templat, menggunakan operator |. Ia membolehkan anda memformat nilai (tarikh, mata wang, teks) tanpa mengubah data asas atau menulis logik transformasi dalam komponen.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Nilai di sebelah kiri dihantar melalui pipe; argumen mengikuti selepas titik bertindih (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async amat penting: ia subscribe kepada sesuatu Observable (cth. keputusan HTTP), merender nilai yang dipancarkan, dan auto-unsubscribe apabila komponen dimusnahkan — mengelakkan kebocoran memori tanpa pengurusan subscription secara manual.
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;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
Pure pipe disimpan dalam cache dan hanya mengira semula apabila inputnya berubah — menjadikannya berprestasi tinggi.
Pipe memastikan pemformatan data kekal deklaratif dan berada dalam templat di tempat yang sepatutnya — terpisah daripada logik komponen — boleh diguna semula, boleh dirantai, dan (apabila pure) cekap.
Pipe terbina dalam meliputi pemformatan biasa, pipe tersuai mengendalikan transformasi khusus aplikasi, dan pipe async ialah cara idiomatik dan bebas kebocoran untuk memaparkan data Observable — corak yang akan anda gunakan sentiasa dalam Angular.