| نوع الأنبوب المعماري | الهدف الوظيفي والتشغيلي | أمثلة على خيارات التخصيص والمخرجات |
|---|---|---|
| CurrencyPipe | تنسيق القيم الرقمية الخام كعملات مالية مع عرض رمز العملة المحلي أو الرمزي (مثل USD أو EUR) | {{ amount | currency: 'USD': 'symbol': '1.2-2' }} |
| PercentPipe | تحويل الكسور العشرية إلى قيم نسبة مئوية مع التحكم في عدد الخانات الظاهرة | {{ progress | percent: '1.1-2' }} |
في النظم البرمجية والمشاريع المالية الكبرى المصممة عبر Angular 22.1، يعد عرض الأرقام المالية والنسب الإحصائية بدقة متناهية ودون أي أخطاء مطبعية أمراً حاسماً. لا يقتصر الأمر على مجرد إظهار الأرقام، بل امتد ليتطلب توافقاً تاماً مع الرموز العالمية للعملات، وتحديد المنازل العشرية المالية، وإدارة الرموز الثقافية. يختص هذا الدرس بالتعامل المعماري الدقيق مع أنبوب العملات (CurrencyPipe) وأنبوب النُسَب المئوية (PercentPipe) مع استعراض أحدث الممارسات الهندسية.
يتيح لك أنبوب العملات اختيار طريقة عرض رمز العملة؛ إما عبر الرمز الدولي المختصر (مثل USD) أو الرمز التقليدي المباشر ($)، مع دعم كامل للتحكم بعدد الخانات العشرية لتتوافق مع معايير المحاسبة الرقمية الحديثة.
عند دمج هذه الأنابيب مع الإشارات الحديثة (Signals) في أنجولر، يتم إعادة تقييم وتحديث القيم المالية أو النسب المئوية فور تغير الحالة الأساسية في صنف المكون، مما يضمن دقة البيانات المعروضة للمستخدم دون تدخل يدوي.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-currency-pipe-mastery', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>تنسيق العملات المالية المتقدم (CurrencyPipe)</h3> |
| 11 | <p>عرض الأسعار والقيم النقدية بمعايير المؤسسات المالية:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>المبلغ الخام الأساسي:</strong> {{ productPrice }}</p> |
| 15 | <p><strong>بالدولار الأمريكي (رمز افتراضي):</strong> {{ productPrice | currency: 'USD' }}</p> |
| 16 | <p><strong>باليورو الأوروبي (تنسيق مخصص '1.2-2'):</strong> {{ productPrice | currency: 'EUR':'symbol':'1.2-2' }}</p> |
| 17 | </div> |
| 18 | </div> |
| 19 | `, |
| 20 | styles: [` |
| 21 | .master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; } |
| 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 CurrencyPipeMasteryComponent { |
| 27 | productPrice = 4599.952; |
| 28 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-percent-pipe-mastery', |
| 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> {{ growthRate }}</p> |
| 15 | <p><strong>النسبة المئوية (بدون كسور):</strong> {{ growthRate | percent: '1.0-0' }}</p> |
| 16 | <p><strong>النسبة المئوية (بمنزلتين عشريتين):</strong> {{ growthRate | percent: '1.2-2' }}</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 PercentPipeMasteryComponent { |
| 27 | growthRate = 0.14785; |
| 28 | } |
| 1 | import { Component, signal } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-dynamic-financial-view', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="master-container"> |
| 10 | <h3>المحفظة التفاعلية وتنسيق العملات بالربط مع Signals</h3> |
| 11 | <p>تحديث القيم المالية لحظياً ومراقبة انعكاس الأنابيب عليها:</p> |
| 12 | |
| 13 | <div class="data-card"> |
| 14 | <p><strong>إجمالي المحفظة المتغير:</strong> {{ totalBalance() | currency: 'USD':'symbol':'1.2-2' }}</p> |
| 15 | <button (click)="boostBalance()" class="action-btn">زيادة الأصول المالية</button> |
| 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 | .action-btn { background: #38bdf8; color: #090d16; border: none; padding: 8px 16px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 8px; } |
| 24 | .action-btn:hover { background: #7dd3fc; } |
| 25 | `] |
| 26 | }) |
| 27 | export class DynamicFinancialViewComponent { |
| 28 | totalBalance = signal(12540.75); |
| 29 | |
| 30 | boostBalance() { |
| 31 | this.totalBalance.update(current => current + 1550.25); |
| 32 | } |
| 33 | } |