Pipes تحويل البيانات للعرض مباشرة في القوالب (templates)، باستخدام العامل |. تتيح لك تنسيق القيم (التواريخ والعملات والنصوص) دون تغيير البيانات الأساسية أو كتابة منطق التحويل في المكون (component).
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
يتم تمرير القيمة على اليسار عبر الـ pipe؛ وتتبع الوسيطات بنقطتين (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 مهم بشكل خاص: فهو يشترك في Observable (مثل نتيجة HTTP)، ويعرض القيمة المُصدَّرة، ويلغي الاشتراك تلقائياً عند تدمير المكون — مما يمنع تسريب الذاكرة دون إدارة اشتراك يدوية.
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 النقية يتم تخزينها مؤقتاً وإعادة حسابها فقط عند تغيير المدخلات — مما يجعلها فعالة من حيث الأداء.
تحافظ الـ pipes على تنسيق البيانات بطريقة إعلانية وفي القالب حيث تنتمي، منفصلة عن منطق المكون — قابلة لإعادة الاستخدام وقابلة للربط وفعالة (عندما تكون نقية).
تغطي الـ built-in pipes التنسيق الشائع، والـ pipes المخصصة تتعامل مع التحويلات الخاصة بالتطبيق، والـ async pipe هو الطريقة الاصطلاحية والخالية من التسريب لعرض بيانات Observable — وهو نمط ستستخدمه باستمرار في Angular.