Angular Academy · पाठ

पाइप चेन करना और पैरामीटर देना

पाइप संयोजित करें और तर्क पास करें।

पाठ 2, कुल 4 में से13 चरण

पाइप चेन करना और पैरामीटर देना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

पाइप को तर्क देना

पाइप को कोलन के बाद तर्क दिए जा सकते हैं। इसका प्रारूप {{ value | pipeName:arg1:arg2 }} है। हर तर्क को अपने अलग कोलन से अलग किया जाता है।

एक तर्क

कई पाइप एक तर्क लेते हैं। उदाहरण के लिए, date पाइप एक प्रारूप स्ट्रिंग लेता है।

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

एकाधिक तर्क

slice पाइप आरंभ और अंत का इंडेक्स लेता है, और दोनों को अपने-अपने कोलन के साथ दिया जाता है।

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

डायनेमिक तर्क

तर्क केवल लिटरल मान ही नहीं, बल्कि कॉम्पोनेंट के गुण भी हो सकते हैं। इससे आप पाइप के व्यवहार को प्रतिक्रियाशील तरीके से बदल सकते हैं।

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

पाइप चेनिंग क्या है?

आप पाइप को इस तरह क्रम से जोड़ सकते हैं कि एक पाइप का आउटपुट अगले पाइप का इनपुट बन जाए। ये बाएँ से दाएँ चलते हैं।

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

चेनिंग का उदाहरण

यहाँ पहले एक तारीख को प्रारूपित किया जाता है और फिर उसे अपरकेस में बदला जाता है। date पाइप पहले चलता है, फिर uppercase।

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

क्रम महत्वपूर्ण है

जुड़े हुए पाइप का क्रम परिणाम बदल देता है। यहाँ uppercase को slice से पहले या बाद में लगाने पर एक ही टेक्स्ट मिलता है, लेकिन रूपांतरण करने वाले पाइप के साथ क्रम का बहुत महत्व हो सकता है।

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

तर्क और चेनिंग को मिलाना

आप तर्क और चेनिंग को स्वतंत्र रूप से मिला सकते हैं। फिर भी हर पाइप को पिछले पाइप का आउटपुट अपना मान मिलता है।

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

मुद्रा के साथ चेनिंग

किसी संख्या को मुद्रा के रूप में प्रारूपित करें, फिर उसके अतिरिक्त रिक्त स्थान हटाएँ। यह असामान्य हो सकता है, लेकिन इससे पता चलता है कि पाइप एक-दूसरे से जोड़कर उपयोग किए जा सकने वाले निर्माण खंड हैं।

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

पठनीयता के सुझाव

लंबी पाइप चेन पठनीयता को प्रभावित कर सकती हैं। यदि चेन जटिल हो जाए, तो मान को कॉम्पोनेंट में या किसी कस्टम पाइप में पहले से निकालने पर विचार करें।

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

पाइप के आसपास रिक्त स्थान

| और : के आसपास रिक्त स्थान देना वैकल्पिक है, लेकिन पठनीयता के लिए इसकी सलाह दी जाती है। Angular अतिरिक्त रिक्त स्थानों को अनदेखा करता है।

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

त्वरित जाँच

पाइप के तर्कों और चेनिंग की अपनी समझ जाँचें।

पुनरावृत्ति

आपने कोलन के साथ एकल और एकाधिक तर्क देना, कॉम्पोनेंट के गुणों से डायनेमिक तर्कों का उपयोग करना और पाइप को इस तरह जोड़ना सीखा कि आउटपुट बाएँ से दाएँ आगे बढ़े।

अब आप अपना कस्टम पाइप बनाएँगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
38
पाठ
144

अक्सर पूछे जाने वाले प्रश्न

क्या “पाइप चेन करना और पैरामीटर देना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “पाइप चेन करना और पैरामीटर देना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“पाइप चेन करना और पैरामीटर देना” में मैं क्या सीखूँगा?

पाइप संयोजित करें और तर्क पास करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“पाइप चेन करना और पैरामीटर देना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. अंतर्निर्मित पाइप का उपयोग
  2. पाइप चेन करना और पैरामीटर देना
  3. कस्टम पाइप बनाना
  4. शुद्ध बनाम अशुद्ध पाइप
← Angular Academy पर वापस जाएँ