अंतर्निर्मित पाइप का उपयोग
पाइप से दिनांक, संख्याएँ और टेक्स्ट फ़ॉर्मैट करें।
अंतर्निर्मित पाइप का उपयोग, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
पाइप क्या है
पाइप आपके टेम्पलेट में प्रदर्शन के लिए डेटा को सीधे रूपांतरित करता है। आप एक मान, पाइप वर्ण |, और फिर पाइप का नाम लिखते हैं।
पाइप अतिरिक्त घटक तर्क लिखे बिना तारीखों, संख्याओं, मुद्रा और टेक्स्ट को फ़ॉर्मैट करने के लिए बहुत उपयोगी हैं।
पाइप सिंटैक्स
मूल रूप {{ value | pipeName }} है। Angular मान को पाइप में भेजता है और रूपांतरित परिणाम रेंडर करता है।
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->uppercase और lowercase पाइप
uppercase और lowercase स्ट्रिंग के अक्षरों का केस बदलते हैं। इनका उपयोग सामान्यतः लेबल और शीर्षकों के लिए किया जाता है।
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULARdate पाइप
date पाइप Date ऑब्जेक्ट या टाइमस्टैम्प को पढ़ने योग्य स्ट्रिंग में फ़ॉर्मैट करता है। डिफ़ॉल्ट रूप से यह मध्यम तारीख फ़ॉर्मैट का उपयोग करता है।
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();तारीखों को फ़ॉर्मैट करना
आप 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 -->currency पाइप
currency पाइप किसी संख्या को धनराशि के रूप में फ़ॉर्मैट करता है। डिफ़ॉल्ट रूप से यह USD का उपयोग करता है, लेकिन आप मुद्रा कोड दे सकते हैं।
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;number और percent पाइप
number पाइप अंकों के विकल्पों के साथ संख्याओं को फ़ॉर्मैट करता है और percent किसी मान को प्रतिशत के रूप में दिखाता है।
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->digitsInfo को समझना
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 -->json पाइप
json पाइप किसी भी ऑब्जेक्ट को JSON स्ट्रिंग में क्रमबद्ध करता है। इसका उपयोग मुख्यतः टेम्पलेट डीबग करने के लिए होता है, ताकि आप अपने डेटा की संरचना देख सकें।
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };slice पाइप
slice पाइप किसी ऐरे या स्ट्रिंग का एक उपसमुच्चय लौटाता है, ठीक JavaScript slice की तरह। यह सूचियों को छोटा करने के लिए उपयोगी है।
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>स्टैंडअलोन घटकों में पाइप आयात करना
स्टैंडअलोन घटकों में आपके द्वारा उपयोग किए जाने वाले पाइप आयात करना आवश्यक है, जैसे 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();
}त्वरित जाँच
बिल्ट-इन पाइप की अपनी समझ जाँचें।
पुनरावलोकन
आपने मुख्य बिल्ट-इन पाइप सीखे: uppercase, lowercase, date, currency, number, percent, json और slice।
पाइप फ़ॉर्मैटिंग को टेम्पलेट में साफ़ और घोषणात्मक रखते हैं। अगली बार आप पाइप को एक के बाद एक जोड़ना और उन्हें आर्ग्युमेंट देना सीखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “अंतर्निर्मित पाइप का उपयोग” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अंतर्निर्मित पाइप का उपयोग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“अंतर्निर्मित पाइप का उपयोग” में मैं क्या सीखूँगा?
पाइप से दिनांक, संख्याएँ और टेक्स्ट फ़ॉर्मैट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“अंतर्निर्मित पाइप का उपयोग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- अंतर्निर्मित पाइप का उपयोग
- पाइप चेन करना और पैरामीटर देना
- कस्टम पाइप बनाना
- शुद्ध बनाम अशुद्ध पाइप