العودة إلى الدورة

استخدام الأنابيب المدمجة (Date, Currency, Json)

مطور Angular الشامل: من الصفر إلى الاحتراف

19. استخدام الأنابيب المدمجة (Date, Currency, Json)

الأنابيب (Pipes) هي طريقة لتحويل البيانات المعروضة في القالب قبل تقديمها للمستخدم. تُستخدم في الاستيفاء أو عمليات الربط الأخرى باستخدام عامل الأنبوب (|).

الصيغة

html {{ expression | pipeName : argument1 : argument2 }}

الأنابيب المدمجة الشائعة

1. DatePipe

تنسيق قيمة التاريخ وفقاً لقواعد اللغة المحلية.

typescript currentDate: Date = new Date();

html

Full Date: {{ currentDate | date }}

Short Date: {{ currentDate | date:'shortDate' }}

Custom Format: {{ currentDate | date:'dd/MM/yyyy HH:mm' }}

2. CurrencyPipe

تنسيق رقم كسلسلة نصية للعملة.

typescript productPrice: number = 129.50;

html

Price: {{ productPrice | currency }}

EU Price: {{ productPrice | currency:'EUR':'symbol':'1.2-2' }}

3. JsonPipe

مفيد لتصحيح الأخطاء. يحول قيمة JavaScript إلى سلسلة نصية بتنسيق JSON.

typescript userData = { id: 1, status: 'active' };

html

{{ userData | json }}

4. أنابيب أخرى

  • UppercasePipe, LowercasePipe
  • SlicePipe (جزء من سلسلة نصية أو مصفوفة)
  • DecimalPipe (تنسيق الأرقام)