Angular Academy · درس

استخدام Pipes المضمّنة

نسّقوا التواريخ والأرقام والنصوص باستخدام Pipes

استخدام Pipes المضمّنة درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

ما هو Pipe؟

يحوّل pipe البيانات مباشرةً في القالب بغرض العرض. تكتبون قيمة، ثم رمز الأنبوب |، ثم اسم الأنبوب.

تُعد Pipes مناسبة لتنسيق التواريخ والأرقام والعملات والنصوص من دون كتابة منطق إضافي في المكوّن.

صيغة Pipe

الصيغة الأساسية هي {{ value | pipeName }}. تمرّر Angular القيمة إلى الأنبوب وتعرض النتيجة المحوّلة.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

Pipes uppercase وlowercase

يغيّر uppercase وlowercase حالة أحرف السلسلة النصية. وهما بسيطان ويُستخدمان عادةً للتسميات والعناوين.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

Pipe date

ينسّق date كائن Date أو طابعًا زمنيًا في سلسلة نصية مقروءة. ويستخدم افتراضيًا تنسيق تاريخ متوسطًا.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

تنسيق التواريخ

يمكنكم تمرير سلسلة تنسيق إلى pipe date، مثل "shortDate" أو "fullDate" أو نمط مخصص مثل "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

Pipe currency

ينسّق currency رقمًا على هيئة مبلغ مالي. ويستخدم USD افتراضيًا، لكن يمكنكم تمرير رمز عملة.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

Pipes number وpercent

ينسّق pipe number الأرقام باستخدام خيارات الخانات، بينما يعرض percent القيمة كنسبة مئوية.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

فهم digitsInfo

يقبل pipe number سلسلة digitsInfo بالصيغة: minIntegerDigits.minFractionDigits-maxFractionDigits. فعلى سبيل المثال، يعرض "1.2-2" دائمًا منزلتين عشريتين بالضبط.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

Pipe json

يحوّل pipe json أي كائن إلى سلسلة JSON. ويُستخدم أساسًا لتصحيح أخطاء القوالب حتى تتمكنوا من رؤية بنية بياناتكم.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

Pipe slice

يعيد pipe slice جزءًا من مصفوفة أو سلسلة نصية، على نحو مشابه لـ slice في JavaScript. وهو مفيد لاختصار القوائم.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

استيراد Pipes في المكوّنات المستقلة

في المكوّنات المستقلة، يجب استيراد Pipes التي تستخدمونها، مثل DatePipe أو CurrencyPipe، من @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

تحقّق سريع

اختبروا مدى فهمكم للـ pipes المضمّنة.

مراجعة

تعلّمتم استخدام Pipes المضمّنة الأساسية: uppercase وlowercase وdate وcurrency وnumber وpercent وjson وslice.

تحافظ Pipes على وجود التنسيق داخل القالب بطريقة نظيفة وتصريحية. ستتعلّمون بعد ذلك تسلسل Pipes وتمرير الوسائط إليها.

الأسئلة الشائعة

هل درس «استخدام Pipes المضمّنة» مجاني؟

نعم — نص درس «استخدام Pipes المضمّنة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «استخدام Pipes المضمّنة»؟

نسّقوا التواريخ والأرقام والنصوص باستخدام Pipes تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «استخدام Pipes المضمّنة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy