Pipes verileri görüntülenmek için doğrudan şablonlarda | operatörünü kullanarak dönüştürür. Değerleri (tarihler, para birlikleri, metin) biçimlendirmenizi sağlar; temel verileri değiştirmeden veya bileşende dönüşüm mantığı yazmadan.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Sol taraftaki değer pipe üzerinden iletilir; bağımsız değişkenler iki nokta üst üste (date:'longDate') izler.
<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 özellikle önemlidir: bir Observable'a abone olur (örn. HTTP sonucu), yayılan değeri işler ve bileşen yok edildiğinde otomatik olarak aboneliği iptal eder — manuel abonelik yönetimi olmadan bellek sızıntılarını engeller.
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)
Saf pipes önbelleğe alınır ve yalnızca girdileri değiştiğinde yeniden hesaplanır — onları verimli kılar.
Pipes veri biçimlendirmesini bildirimsel tutup şablonda tutarken, bileşen mantığından ayrı — yeniden kullanılabilir, birleştirilebilir ve (saf olduğunda) verimli.
Yerleşik pipes yaygın biçimlendirmeyi kapsar, özel pipes uygulamaya özgü dönüşümleri işler ve async pipe Observable verilerini görüntülemenin deyimsel, sızıntısız yoludur — Angular'da sürekli kullanacağınız bir desen.