ال pipes في angular

الـ pipe او الانبوبة أو دعنا نترجمها الى قناة   فالـ pipe في angular  عبارة عن مساعدات (ملفات نقوم ببرمجتها) حيث أن هذه المساعدات تحول لك بيانات معينة الى بيانات أكثر قابلية للقراءة  ومفهومة للبشر وأيضا لتحويل عمليات حسابية أو معادلات أو عملات نقدية 

سنعطي مثال على ذلك

مثلا  الـ date   التواريخ التي نجلبها من قاعدة البيانات  قد نحتاج احيانا الى عرضها بالتطبيقات بشكل أوضح مثل ان نضيف مثلا satuday  او نعرض بالتطبيق مثلا (يوم الثلاثاء 11 مايو 2019 )

هنا سنحتاج الى مايسمى بالـ pipe ونقوم ببرمجته حسب حاجتنا مثلا لكتابة هذا النوع من التواريخ 

مثال اخر لنفهم الـ pipe بشكل أوضح

مثلا بالنصوص قد نحتاج احيانا الى عدم عرض كامل النص بصفحة معينة من التطبيق ونفضل ان نعرض نص قصير  ومختصر  ويرافق هذا النص زر (Read more) الدي يوجهك الى النص التفصيلي

هنا سنحتاج الى برمجة pipe يسمح لنا بقص النصوص وكل ماعلينا هو سوى وضع اسم هذا الـ pipe بالوسم الذي يعرض النص ونمرر له متغير (عدد الحروف مثلا 255 حرف) 

الـ pipe يستخدم بكثرة في التطبيقات الرياضية التي تحتاج الى استخدام الدوال والمعادلات وأيضا بالتطبيقات تحويل العملات وأشياء من هذا القبيل

مثال على برمجة pipe

سنقوم ببرمجة pipe يسمح لنا باقتطاع النص الى نص مختصر ونمرر له المتغير (عدد الحروف) حتى يكون أكثر ديناميكية ومرونة

ادخل عبر سطر الأوامر terminal /command prompt وتموضع بتطبيقك عن طريق التعليمة cd xxx/your/path

أنشئ ال pipe ولنسميه truncate

ng generate pipe truncate --module=app

(طبعا عندما نضيف --module=app) فنحن نقصد ان يقوم بتعريفه بالموديول الأساسي app.module  وهذا النوع من التعليمات قد نحتاج اليه عندما نستخدم بتطبيقنا اكثر من module واحد لذلك نحتاج إلى  التوضيع للـ angular المكان (الموديول) الذي سنعرفه فيه

بعد  إنشاء الpipe نقوم بالدخول الى هذا الملف truncate.pipe.ts والذي سيكون بهذا الشكل

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

سنغير محتوى دالة transforme الى ما يناسبنا  حيث سيكون المحتوى هكذا

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {

 
  // الدالة ترجع لك متغير بصيغة نص
  // هي محتوى النص value
  // limit  هو عدد الحروف اللازمة لعرضها
  // completeWords عرض  الكلمة الاخيرة في حال تم قطعها
  //ellipsis   // الثلاث نقاط هي ختام النص الافتراضية  .إذا لم يجد المتغير المسؤول عن ختام النص سيضع ثلاث نقاط بشكل افتراضي
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...'): string  {
    (value==null) ? value ='' : null;
    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }
    return `${value.substr(0, limit)}${ellipsis}`;
  }


}

الان كل ماعلينا فعله هو الذهاب لملف template الـ (view) واستخدام ال pipe

<p>{{ myText }}</p> // طباعة النص بشكله العادي
<p>{{ myText| truncate:20 }}</p> // عرض النص بالعشرين حرف الأولى 
<article>{{ myText| truncate:32,false,'.......' }}</article> // بحال ما إذا أردنا أن ينتهى النص بعدة نقاط أو شيء ما نريده 

طبعا النتيجة النص ستكون بهذا الشكل مثلا

Lorem Ipsum is simply dummy text of the printing and typese...

لاتنسى أن تتأكد أن الـ pipe الدي قمنا بانشاءه معرف في app.module

 declarations: [
   //....
    TruncatePipe,
   //....  
],