एंगुलर में कस्टम पाइप कैसे बनाएं

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

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

अपना कोणीय प्रोजेक्ट सेट करें

कस्टम पाइप बनाने से पहले, सुनिश्चित करें कि आप एंगुलर में पाइप को समझें. एंगुलर प्रोजेक्ट स्थापित करने में सक्षम होने के लिए, सुनिश्चित करें कि आपकी मशीन पर एंगुलर सीएलआई स्थापित है। आप इसे इंस्टॉल कर सकते हैं एनपीएम (नोड पैकेज मैनेजर).

निम्नलिखित आदेश चलाकर कोणीय सीएलआई स्थापित करें:

npm install -g @angular/cli

इसके बाद, इस कमांड को चलाकर एक नया एंगुलर प्रोजेक्ट बनाएं:

ng new my-app

एक बार जब आप प्रोजेक्ट बना लें, तो अपनी प्रोजेक्ट निर्देशिका पर जाएँ और अपने आईडीई पर अपना एप्लिकेशन खोलें।

एक कस्टम पाइप बनाएं

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

ऐसा करने के लिए, टर्मिनल पर अपने ऐप की निर्देशिका में निम्नलिखित कमांड चलाएँ:

ng generate pipe customPipe

यह कमांड नाम की दो फाइलें जेनरेट करेगा कस्टम-पाइप.पाइप.ts और कस्टम-पाइप.पाइप.spec.ts में स्रोत/ऐप निर्देशिका। Custom-pipe.pipe.ts फ़ाइल है एक टाइपस्क्रिप्ट फ़ाइल इसमें आपके कस्टम पाइप को परिभाषित करने के लिए कोड शामिल है। आप कस्टम पाइप पर परीक्षण चलाने के लिए Custom-pipe.pipe.spec.ts का उपयोग करेंगे।

में कस्टम-पाइप.पाइप.ts फ़ाइल, आपको कोड की ये पंक्तियाँ मिलेंगी:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

यह कोड ब्लॉक आयात करता है पाइप डेकोरेटर और पाइपट्रांसफॉर्म इंटरफ़ेस से @कोणीय/कोर मापांक। पाइप डेकोरेटर पाइप के लिए मेटाडेटा को परिभाषित करता है, और पाइप क्लास पाइपट्रांसफॉर्म इंटरफ़ेस को लागू करता है।

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

परिवर्तन विधि दो पैरामीटर लेती है, कीमत और तर्क. मान पैरामीटर पाइप के ट्रांसफ़ॉर्म मान का प्रतिनिधित्व करता है, और args पैरामीटर वैकल्पिक पैरामीटर का प्रतिनिधित्व करता है जिसे आप जोड़ना चाह सकते हैं।

अब आप बॉयलरप्लेट को समझ गए होंगे कस्टम-पाइप.पाइप.ts फ़ाइल, उपरोक्त कोड ब्लॉक को इस कोड से बदलें:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

इस कोड ब्लॉक में, परिवर्तन विधि लेता है कीमत प्रकार का पैरामीटर डोरी एक तर्क के रूप में और स्ट्रिंग्स की एक सरणी लौटाता है। ट्रांसफ़ॉर्म विधि इनपुट स्ट्रिंग को अलग-अलग वर्णों की एक सरणी में विभाजित करती है विभाजित करना विधि और परिणामी सरणी लौटाता है।

कस्टम पाइप को आपके एप्लिकेशन में एकीकृत करना

आपने अपना कस्टम पाइप सफलतापूर्वक बना लिया है और अब आप इसे अपने एंगुलर टेम्पलेट्स में उपयोग कर सकते हैं। अपने एप्लिकेशन में कस्टम पाइप का उपयोग करने से पहले, इसे आयात करें और इसे अपने में घोषित करें ऐप.मॉड्यूल.ts फ़ाइल। ऐसा करने के लिए, app.module.ts में कोड को निम्नलिखित से बदलें:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

अब आप अपने टेम्पलेट्स में पाइप का उपयोग कर सकते हैं। खोलें ऐप.component.html फ़ाइल करें और निम्नलिखित कोड जोड़ें:

<p>{{ 'apple' | CustomPipe }}p>

इस उदाहरण में, आप इसका उपयोग करते हैं कस्टमपाइप स्ट्रिंग को बदलने के लिए पाइप 'सेब' एक स्ट्रिंग सरणी में.

अपने कस्टम पाइप का परीक्षण करें

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

ng serve

अपना ब्राउज़र खोलें और नेविगेट करें http://localhost: 4200. आपको पृष्ठ पर प्रदर्शित रूपांतरित स्ट्रिंग देखनी चाहिए:

अपने कोणीय अनुप्रयोगों को अगले स्तर पर ले जाएं

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

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