कोणीय में पाइपों के लिए एक व्यापक मार्गदर्शिका

एंगुलर में पाइप्स उपयोगकर्ताओं को दृश्य में प्रदर्शित होने से पहले डेटा को बदलने की अनुमति देते हैं। पाइप अन्य प्रोग्रामिंग भाषाओं में फिल्टर के समान हैं, लेकिन अधिक लचीले हैं और विशिष्ट आवश्यकताओं को पूरा करने के लिए अनुकूलित किए जा सकते हैं। यहां, आप जानेंगे कि अपने एंगुलर एप्लिकेशन में पाइप का उपयोग कैसे करें।

कोणीय में पाइप क्या हैं?

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

आप पाइप का उपयोग कर सकते हैं आपके कोणीय घटकों में और आपके टेम्पलेट. पाइपों का उपयोग करना आसान है, और अधिक जटिल परिवर्तन बनाने के लिए आप उन्हें श्रृंखलाबद्ध कर सकते हैं।

एंगुलर सहित कई अंतर्निर्मित पाइप प्रदान करता है डेटपाइप, अपरकेसपाइप, लोअरकेसपाइप, करेंसीपाइप, दशमलवपाइप, प्रतिशतपाइप, जेसनपाइप, स्लाइसपाइप, और AsyncPipe. यह कस्टम पाइप बनाने की कार्यक्षमता भी प्रदान करता है।

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

डेटपाइप

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

उदाहरण के लिए:

<p>Today's date is {{ currentDate | date }}p>

इस उदाहरण में, आप उत्तीर्ण होते हैं आज की तारीख के माध्यम से परिवर्तनीय डेटपाइप, जो फिर इसे डिफ़ॉल्ट दिनांक प्रारूप के अनुसार प्रारूपित करता है। आप परिभाषित करें आज की तारीख आपके घटक की टाइपस्क्रिप्ट फ़ाइल में वेरिएबल।

यहाँ एक उदाहरण है:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

आप अतिरिक्त पैरामीटर भी पास कर सकते हैं डेटपाइप आउटपुट को अनुकूलित करने के लिए:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

उपरोक्त कोड ब्लॉक पारित हो गया कम समय पैरामीटर को डेटपाइप. ये बताता है डेटपाइप संक्षिप्त दिनांक प्रारूप का उपयोग करके दिनांक को प्रारूपित करना। साथ में कम समय पैरामीटर, आप कॉन्फ़िगर कर सकते हैं डेटपाइप सहित विभिन्न मापदंडों का उपयोग करना जेड, लंबी तारीख, और कस्टम दिनांक प्रारूप जैसे dd/MM/YY.

अपरकेसपाइप और लोअरकेसपाइप

अपरकेसपाइप और लोअरकेसपाइप अपने पाठों को रूपांतरित करें. आप इसका उपयोग करके अपने टेक्स्ट को अपरकेस में बदलते हैं अपरकेसपाइप और लोअरकेस का उपयोग करके लोअरकेसपाइप.

का उपयोग करने के लिए अपरकेसपाइप और लोअरकेसपाइप, उसके बाद पाइप चिह्न (|) जोड़ें छोटे का उपयोग करने के लिए लोअरकेसपाइप या अपरकेस का उपयोग करने के लिए अपरकेसपाइप.

इसका उपयोग कैसे करें इसका एक उदाहरण नीचे दिया गया है अपरकेसपाइप और लोअरकेसपाइप:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

करेंसीपाइप

का उपयोग करेंसीपाइप, आप अपने एप्लिकेशन में संख्याओं को मुद्रा में प्रारूपित कर सकते हैं। करेंसीपाइप आपके स्थान के अनुसार संख्याओं को प्रारूपित करता है। का उपयोग करके अपने नंबरों को प्रारूपित करने के लिए करेंसीपाइप, उसके बाद पाइप चिह्न का उपयोग करें मुद्रा.

उदाहरण के लिए:

<p>{{ number | currency }}p>

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

यहाँ एक उदाहरण है:

<p>{{ number | currency: 'GBP' }}p>

यहाँ, आप पास करें GBP पैरामीटर को करेंसीपाइप. यह सुनिश्चित करता है कि संख्या वेरिएबल ग्रेट ब्रिटेन पाउंड मुद्रा में परिवर्तित होता है।

डेसीमलपाइप और प्रतिशतपाइप

दशमलवपाइप आपकी संख्याओं को दशमलव में बदल देता है, जबकि प्रतिशतपाइप आपकी संख्याओं को प्रतिशत में परिवर्तित करता है।

का उपयोग करने के लिए दशमलवपाइप, उसके बाद पाइप चिह्न का उपयोग करें संख्या और अतिरिक्त पैरामीटर. का उपयोग करने के लिए प्रतिशतपाइप, वही करें लेकिन प्रतिस्थापित करें संख्या साथ प्रतिशत बिना किसी अतिरिक्त पैरामीटर के.

उदाहरण के लिए:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

अतिरिक्त पैरामीटर को पास कर दिया गया दशमलवपाइप प्रदर्शित पूर्णांक और भिन्नात्मक अंकों की संख्या को नियंत्रित करें। 1 पैरामीटर निर्दिष्ट करता है कि कम से कम एक पूर्णांक अंक होना चाहिए। इसकी तुलना में, 2.3 पैरामीटर निर्दिष्ट करता है कि कम से कम दो और अधिकतम तीन भिन्नात्मक अंक होने चाहिए।

जेसनपाइप

जेसनपाइप एक अंतर्निर्मित पाइप है जो डेटा को JSON स्ट्रिंग प्रारूप में परिवर्तित करता है। इसका उपयोग मुख्य रूप से डिबगिंग उद्देश्यों के लिए किया जाता है। आप इसका उपयोग कर सकते हैं जेसनपाइप ऑब्जेक्ट और सरणियों दोनों पर।

का उपयोग करने के लिए सिंटैक्स जेसनपाइप इस प्रकार है:

{{ expression | json }}

यहाँ, अभिव्यक्ति वह डेटा है जिसे आप JSON प्रारूप में कनवर्ट करना चाहते हैं। पाइप ऑपरेटर (|) लागू करता है जेसनपाइप अभिव्यक्ति के लिए.

उदाहरण के लिए, अपने घटक में एक ऑब्जेक्ट और एक सरणी परिभाषित करें:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

उपरोक्त कोड ब्लॉक परिभाषित करता है उपयोगकर्ता वस्तु और ए प्रोफाइल सरणी. अब, आप इसका उपयोग कर सकते हैं जेसनपाइप ऑब्जेक्ट और ऐरे को JSON में बदलने के लिए।

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

यहां ही जेसनपाइप परिवर्तित कर देगा उपयोगकर्ता वस्तु और प्रोफाइल एक JSON स्ट्रिंग में सरणी, जिसे आप विकास या डिबगिंग के दौरान अपने टेम्पलेट्स में तुरंत निरीक्षण कर सकते हैं।

स्लाइसपाइप

स्लाइसपाइप जावास्क्रिप्ट के समान ही है टुकड़ा() तरीका। स्लाइसपाइप नई सारणी या स्ट्रिंग बनाने के लिए उनके तत्वों को निकालकर सारणी या स्ट्रिंग को प्रारूपित करता है।

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

इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है स्लाइसपाइप:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

इस उदाहरण में, स्लाइसपाइप से पहले दो तत्व निकालेगा डोरी वेरिएबल, इंडेक्स 0 पर तत्व और इंडेक्स 1 पर तत्व। इसके अलावा, यह से पहला तत्व निकालेगा सरणी चर। स्लाइसपाइप यह तब उपयोगी होता है जब आप टेम्प्लेट में डेटा का केवल एक भाग प्रदर्शित करना चाहते हैं।

AsyncPipe

AsyncPipe एक अंतर्निर्मित एंगुलर पाइप है जो किसी ऑब्जर्वेबल या प्रॉमिस को स्वचालित रूप से सब्सक्राइब और अनसब्सक्राइब करता है। यह ऑब्जर्वेबल या प्रॉमिस द्वारा उत्सर्जित नवीनतम मान लौटाता है।

उपयोग करने के लिए वाक्यविन्यास AsyncPipe इस प्रकार है:

{{ expression | async }}

यहां, अभिव्यक्ति वह ऑब्जर्वेबल या प्रॉमिस है जिसकी आप सदस्यता लेना चाहते हैं।

उदाहरण के लिए:

let numbers = of(1, 2, 3, 4, 5);

आप उपयोग कर सकते हैं AsyncPipe इस ऑब्जर्वेबल की सदस्यता लेने और नवीनतम उत्सर्जित मूल्य को इस तरह प्रदर्शित करने के लिए:

<p>{{ numbers | async }}p>

यह कोड ब्लॉक ऑब्जर्वेबल द्वारा उत्सर्जित नवीनतम संख्या को आउटपुट करेगा। AsyncPipe आपके टेम्प्लेट में एसिंक्रोनस ऑपरेशंस को संभालते समय यह बहुत उपयोगी है। जब घटक आरंभ होता है तो यह स्वचालित रूप से ऑब्जर्वेबल या प्रॉमिस की सदस्यता लेता है और नष्ट होने पर सदस्यता समाप्त कर देता है।

कोणीय में चेनिंग पाइप

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

यहाँ मूल वाक्यविन्यास है:

<p>{{ expression | pipe1 | pipe2 |... }}p>

उदाहरण के लिए, आप इसका उपयोग करके दिनांक ऑब्जेक्ट को एक स्ट्रिंग में बदल सकते हैं डेटपाइप और फिर उस स्ट्रिंग को का उपयोग करके अपरकेस में कनवर्ट करें अपरकेसपाइप.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

पाइप्स का उपयोग करके गतिशील एप्लिकेशन बनाएं

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