पाइप्स एंगुलर में सरल फ़ंक्शन हैं जिनका उपयोग अंतर्निहित डेटा को संशोधित किए बिना डेटा को टेम्पलेट्स में बदलने के लिए किया जाता है। पाइप्स एक मान लेते हैं, उसे संसाधित करते हैं, और एक स्वरूपित या रूपांतरित आउटपुट लौटाते हैं। इनका उपयोग अक्सर तिथियों, संख्याओं, स्ट्रिंग्स और यहां तक ​​कि सरणियों या वस्तुओं को स्वरूपित करने के लिए किया जाता है।

वे आपको अंतर्निहित डेटा मॉडल में बदलाव किए बिना डेटा को अधिक पठनीय या प्रासंगिक प्रारूप में सीधे दृश्य में प्रारूपित और प्रदर्शित करने की अनुमति देते हैं।

पाइप का उपयोग करने से कोड को साफ और पठनीय रखने में मदद मिलती है। टेम्प्लेट या घटकों में जटिल तर्क लिखने के बजाय, आप उस तर्क को एक पाइप में समाहित कर सकते हैं, जिसे बाद में आपके एप्लिकेशन के विभिन्न हिस्सों में पुन: उपयोग किया जा सकता है।
उदाहरण के लिए, यदि आप एक ब्लॉग प्लेटफ़ॉर्म विकसित कर रहे हैं जहाँ उपयोगकर्ता लेखों की प्रकाशन तिथि देख सकते हैं। तारीखों को कच्चे प्रारूप "2024–08–31T14:48:00.000Z" के बजाय उपयोगकर्ता-अनुकूल प्रारूप में प्रदर्शित करने की आवश्यकता है, जैसे "31 अगस्त, 2024"। पाइप्स के साथ, आप घटक में दिनांक को मैन्युअल रूप से फ़ॉर्मेट करने, कोड को अव्यवस्थित करने और पठनीयता को कम करने के बजाय टेम्पलेट में एंगुलर के अंतर्निहित DatePipe का उपयोग कर सकते हैं।

Published on: {{ article.publishDate | date:'longDate' }}

एक पाइप लगाने के लिए, उपरोक्त कोड उदाहरण में दिखाए अनुसार एक टेम्पलेट अभिव्यक्ति के भीतर पाइप ऑपरेटर (|) का उपयोग करें।

अंतर्निर्मित पाइप

एंगुलर कई अंतर्निर्मित पाइपों के साथ आता है जो सामान्य कार्यों को कवर करते हैं (डेटपाइप, अपरकेसपाइप, लोअरकेसपाइप, करेंसीपाइप, एसिंकपाइप, जेसनपाइप, आदि)। इनका उपयोग करने का तरीका जानने से आपका कोड साफ़ और अधिक कुशल बन सकता है।

उदाहरण:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

कीमत: {{उत्पाद.कीमत | मुद्रा:'USD' }}

{{user.name | अपरकेस }}

पैरामीट्रिज्ड पाइप्स

कई कोणीय पाइप अपने व्यवहार को अनुकूलित करने के लिए पैरामीटर स्वीकार करते हैं।

पैरामीटर निर्दिष्ट करने के लिए, कोलन (:) और पैरामीटर मान

कुछ पाइप एकाधिक पैरामीटर स्वीकार करते हैं, जो अतिरिक्त कोलन द्वारा अलग किए जाते हैं।

पैरामीटर हो सकता है वैकल्पिक या आवश्यक। मान लीजिए कि आपके पास एक कस्टम पाइप है जो मुद्रा को प्रारूपित करता है और आपको एक पैरामीटर के रूप में मुद्रा प्रकार को निर्दिष्ट करने की आवश्यकता होती है। यदि यह पैरामीटर प्रदान नहीं किया गया है, तो पाइप मान को सही ढंग से प्रारूपित करने में सक्षम नहीं हो सकता है।

The product price is {{ price | customCurrency:'USD' }}

1. पैरामीटर्स के साथ डेटपाइप

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

यह दिनांक को "31 अगस्त, 2024, 2:48:00 अपराह्न" के रूप में प्रारूपित करता है।

2. पैरामीटर्स के साथ करेंसीपाइप

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

यह मूल्य को "€1,235" के रूप में प्रारूपित करता है (दशमलव स्थानों तक नहीं)।

चेनिंग पाइप

जटिल परिवर्तनों को प्राप्त करने के लिए आप कई पाइपों को एक साथ जोड़ सकते हैं।

{{ article.content | slice:0:100 | uppercase }}

यह article.content के पहले 100 अक्षरों को काट देगा और उन्हें अपरकेस में बदल देगा।

कस्टम पाइप्स

कभी-कभी, अंतर्निर्मित पाइप आपकी विशिष्ट आवश्यकताओं को पूरा नहीं कर सकते हैं और आपको विशिष्ट तर्क को संभालने के लिए एक कस्टम पाइप बनाने की आवश्यकता होगी। यहां बताया गया है कि आप यह कैसे कर सकते हैं।

उदाहरण:

निम्नलिखित उदाहरण में हम एक पाइप बनाने जा रहे हैं जो "हैलो, ऐलिस!" जैसे नाम के साथ एक अभिवादन जोड़ता है।

नया पाइप बनाने के लिए निम्नलिखित कमांड चलाएँ:

ng generate pipe greet

अब, पाइप तर्क को शामिल करने के लिए src/app निर्देशिका में greet.pipe.ts फ़ाइल को संशोधित करें:

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

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

एक बार जब आपका पाइप तैयार हो जाए, तो आप इसे अपने टेम्पलेट्स में उपयोग कर सकते हैं।

{{ 'Alice' | greet }}

एक पैरामीटरयुक्त कस्टम पाइप बनाना

अब हम अभिवादन को अनुकूलन योग्य बनाने जा रहे हैं, ताकि आप कह सकें "हाय, ऐलिस!" या "आपका स्वागत है, ऐलिस!" यह इस पर निर्भर करता है कि आप पाइप में क्या पास करते हैं।

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

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

परिवर्तन विधि में अब दूसरा पैरामीटर है, ग्रीटिंग। यदि कोई अभिवादन प्रदान नहीं किया गया है, तो यह डिफ़ॉल्ट रूप से "हैलो" हो जाता है।

अब आप अपने टेम्पलेट्स में ग्रीटिंग को कस्टमाइज़ कर सकते हैं।

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

शुद्ध बनाम अशुद्ध पाइप

1. शुद्ध पाइप्स
डिफ़ॉल्ट रूप से, सभी कोणीय पाइप शुद्ध हैं। एक शुद्ध पाइप को केवल तभी कॉल किया जाता है जब इनपुट डेटा (जैसे कोई संख्या या स्ट्रिंग) या जब किसी ऑब्जेक्ट का संदर्भ (जैसे कोई सरणी या दिनांक) बदलता है। यह शुद्ध पाइपों को कुशल और निष्पादन योग्य बनाता है क्योंकि पाइप अनावश्यक रूप से नहीं चलता है।

हालाँकि, यदि आपका डेटा अधिक जटिल है, जैसे आइटमों की एक सरणी, तो एंगुलर को सरणी के अंदर बदलाव नज़र नहीं आएगा (जैसे कोई नया आइटम जोड़ना) क्योंकि सरणी का संदर्भ नहीं बदला है।

जब तक आवश्यक न हो, अनावश्यक पुन: प्रस्तुतीकरण से बचने और प्रदर्शन बनाए रखने के लिए अपने पाइपों को शुद्ध रखें।

उदाहरण:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

आपके टेम्पलेट में:

• {{ item.name }} - {{ item.price | formatPrice }}

यदि आप बिक्री पर मौजूद आइटम सरणी में कोई नया आइटम जोड़ते हैं, तो आप उम्मीद कर सकते हैं कि वह सूची में दिखाई देगा। लेकिन यदि आप बस नए आइटम को सरणी में दबाते हैं, तो सूची अपडेट नहीं हो सकती क्योंकि सरणी संदर्भ नहीं बदला है।

2. अशुद्ध पाइप

दूसरी ओर, एक अशुद्ध पाइप को हर बार कॉल किया जाता है जब एंगुलर परिवर्तन का पता लगाने वाला चक्र निष्पादित करता है। हालाँकि, क्योंकि वे बहुत बार चलते हैं, वे आपके ऐप को धीमा कर सकते हैं।

उदाहरण:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

आपके टेम्पलेट में:

• {{ item.name }} - {{ item.price | formatPrice }}

अब, जब आप कोई नया आइटम जोड़ते हैं, तो पाइप परिवर्तन को नोटिस करेगा और सूची को अपडेट करेगा।

पाइप्स का उपयोग करने के लिए सर्वोत्तम अभ्यास

1. पाइप्स को सरल रखें। पाइपों में भारी संगणना से बचें

2. पाइपों को स्पष्ट और वर्णनात्मक रूप से नाम दें

3. पाइप्स को एक ही जिम्मेदारी पर केंद्रित रखें

4. संभव होने पर अशुद्ध पाइपों से बचें

5. कस्टम पाइपों का अच्छी तरह से परीक्षण करें

निष्कर्ष

कोणीय पाइप डेटा परिवर्तन कार्यों को सुव्यवस्थित करते हैं, जिससे आपका कोड अधिक मॉड्यूलर, पुन: प्रयोज्य और रखरखाव योग्य हो जाता है। वे पूरे एप्लिकेशन में एकरूपता लागू करने और आपके टेम्पलेट्स की पठनीयता में सुधार करने में मदद करते हैं, जो स्केलेबल और रखरखाव योग्य एप्लिकेशन विकसित करने के लिए महत्वपूर्ण है।