Pipes mengubah data untuk ditampilkan langsung di templates, menggunakan operator |. Mereka memungkinkan Anda memformat nilai (tanggal, mata uang, teks) tanpa mengubah data dasar atau menulis logika transformasi di komponen.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Nilai di sebelah kiri diteruskan melalui pipe; argumen mengikuti titik dua (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 sangat penting: berlangganan ke Observable (misalnya hasil HTTP), merender nilai yang dipancarkan, dan secara otomatis berhenti berlangganan ketika komponen dihancurkan — mencegah kebocoran memori tanpa manajemen langganan 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)
Pipes murni disimpan dalam cache dan hanya dihitung ulang ketika input mereka berubah — membuatnya efisien.
Pipes menjaga pemformatan data deklaratif dan di template tempat seharusnya berada, terpisah dari logika komponen — dapat digunakan kembali, dapat dirantai, dan (jika murni) efisien.
Pipes bawaan mencakup pemformatan umum, pipes khusus menangani transformasi spesifik aplikasi, dan pipe async adalah cara idiomatik, bebas kebocoran untuk menampilkan data Observable — pola yang akan Anda gunakan terus-menerus di Angular.