कोणीय 2 - कस्टम पाइप

कोणीय 2 में कस्टम पाइप बनाने की सुविधा भी है। एक कस्टम पाइप को परिभाषित करने का सामान्य तरीका इस प्रकार है।

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

कहाँ पे,

'Pipename' - यह पाइप का नाम है।
Pipeclass - यह कस्टम पाइप को सौंपे गए वर्ग का नाम है।
Transform - यह पाइप के साथ काम करने के लिए फ़ंक्शन है।
Parameters - यह पैरामीटर हैं जो पाइप को पास किए जाते हैं।
Returntype - यह पाइप का रिटर्न प्रकार है।

चलो एक कस्टम पाइप बनाते हैं जो 2 संख्याओं को गुणा करता है। फिर हम अपने कंपोनेंट क्लास में उस पाइप का उपयोग करेंगे।

Step 1 - सबसे पहले, मल्टीप्लायर.पाइप.ts नामक एक फाइल बनाएं।

Step 2 - ऊपर दिए गए फ़ाइल में निम्न कोड रखें।

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

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

उपरोक्त कोड के बारे में निम्नलिखित बातों पर ध्यान देने की आवश्यकता है।

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

Step 3 - app.component.ts फ़ाइल में, निम्न कोड रखें।

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

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

Step 4 - सुनिश्चित करें कि निम्नलिखित कोड app.module.ts फ़ाइल में रखा गया है।

import {
   NgModule
} from '@angular/core';

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

उपरोक्त कोड के बारे में निम्नलिखित बातों पर ध्यान देने की आवश्यकता है।

हमें अपने मल्टीप्लायरपाइप मॉड्यूल को शामिल करना सुनिश्चित करना होगा।
हमें यह सुनिश्चित करने की भी आवश्यकता है कि इसे घोषणा अनुभाग में शामिल किया गया है।

एक बार जब आप सभी कोड परिवर्तन सहेज लेते हैं और ब्राउज़र को ताज़ा करते हैं, तो आपको निम्न आउटपुट मिलेगा।