| اسم الأنبوب المدمج (Built-in Pipe) | الغرض المعماري الأساسي | مثال على صيغة الاستخدام في القالب (Template Syntax) |
|---|---|---|
| DatePipe | تنسيق التواريخ والوقائع الزمنية بناءً على إعدادات المنطقة الزمنية والمحلية | {{ today | date: 'yyyy-MM-dd' }} |
| DecimalPipe | ضبط وتنسيق الأرقام العشريّة وتحديد الحد الأدنى والأقصى للأرقام | {{ price | number: '1.2-2' }} |
| PercentPipe | تحويل القيم العشرية إلى نسب مئوية مع تنسيق العلامة المئوية تلقائياً | {{ ratio | percent: '1.0-1' }} |
استكمالاً لفلسفة التعامل مع تحويل البيانات في Angular 22.1، ننتقل اليوم بعمق نحو الأنابيب المدمجة الأكثر استخداماً في مشاريع المؤسسات الكبرى. عندما يتعلق الأمر بعرض تواريخ تتباين بناءً على النطاق الجغرافي (Locale)، أو أرقام مالية تتطلب فواصل دقيقة، فإن بناء هذه الوظائف يدوياً يعد إهداراً للوقت. توفر لنا أنجولر حزمة متكاملة من الأنابيب الجاهزة للتعامل مع النصوص، التواريخ، والأرقام بمعايير معمارية صارمة.
تتعرف الأنابيب المدمجة (مثل التواريخ والأرقام) تلقائياً على إعدادات اللغة الحالية للمستخدم، مما يضمن عرض الأرقام والتواريخ بالصيغة الثقافية الصحيحة دون الحاجة لكتابة شروط برمجية معقدة.
لا تقتصر الأنابيب على أداء وظيفة ثابتة، بل تدعم تمرير معاملات دقيقة عبر النقطتين الرأسيتين (:) لضبط شكل المخرجات بدقة متناهية (مثل تحديد عدد المنازل العشرية أو نمط عرض التاريخ).
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-date-formatting-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تنسيق التواريخ المتقدم (DatePipe) في Angular 22.1</h3> |
| 11 | <p>شاهد مرونة عرض التواريخ بصيغ مختلفة:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>التاريخ والوقت الخام:</strong> {{ currentTimestamp }}</p> |
| 15 | <p><strong>التاريخ بتنسيق قصير (shortDate):</strong> {{ currentTimestamp | date: 'shortDate' }}</p> |
| 16 | <p><strong>التاريخ بتنسيق مفصل (longDate):</strong> {{ currentTimestamp | date: 'longDate' }}</p> |
| 17 | <p><strong>استخراج الوقت فقط (mediumTime):</strong> {{ currentTimestamp | date: 'mediumTime' }}</p> |
| 18 | </div> |
| 19 | </div> |
| 20 | `, |
| 21 | styles: [` |
| 22 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; } |
| 23 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 24 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 25 | `] |
| 26 | }) |
| 27 | export class DateFormattingDemoComponent { |
| 28 | currentTimestamp = new Date(); |
| 29 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-numbers-formatting-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تنسيق الأرقام والعملات (Decimal & Currency Pipes)</h3> |
| 11 | <p>التحكم الصارم في إظهار الكسور والأقيم المالية:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>الرقم الخام:</strong> {{ rawMetric }}</p> |
| 15 | <p><strong>بعد تنسيق الرقم (number: '1.2-3'):</strong> {{ rawMetric | number: '1.2-3' }}</p> |
| 16 | <p><strong>القيمة المالية بالدولار (currency: 'USD'):</strong> {{ rawMetric | currency: 'USD' }}</p> |
| 17 | </div> |
| 18 | </div> |
| 19 | `, |
| 20 | styles: [` |
| 21 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; margin-top: 16px; } |
| 22 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 23 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 24 | `] |
| 25 | }) |
| 26 | export class NumbersFormattingDemoComponent { |
| 27 | rawMetric = 987654.56789; |
| 28 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-percent-formatting-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تنسيق النُسَب المئوية (PercentPipe)</h3> |
| 11 | <p>تحويل القيم العشرية إلى نسب مئوية منسقة بدقة:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>القيمة العشرية الخام:</strong> {{ completionRatio }}</p> |
| 15 | <p><strong>بعد تنسيق النسبة (percent: '1.0-2'):</strong> {{ completionRatio | percent: '1.0-2' }}</p> |
| 16 | </div> |
| 17 | </div> |
| 18 | `, |
| 19 | styles: [` |
| 20 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; margin-top: 16px; } |
| 21 | .data-card { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; margin: 12px 0; border: 1px solid #334155; font-weight: bold; } |
| 22 | .data-card p { margin: 8px 0; color: #e2e8f0; } |
| 23 | `] |
| 24 | }) |
| 25 | export class PercentFormattingDemoComponent { |
| 26 | completionRatio = 0.8492; |
| 27 | } |