कोणीय 6 - पाइप

इस अध्याय में, हम चर्चा करेंगे कि एंगुलर में पाइप क्या हैं। 6. पाइप्स को पहले एंगुलर 1 में फिल्टर कहा जाता था और एंगुलर 2 में पाइप कहा जाता था।

| चरित्र का उपयोग डेटा को बदलने के लिए किया जाता है। निम्नलिखित के लिए सिंटैक्स है

{{ Welcome to Angular 6 | lowercase}}

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

आइए पाइपों का उपयोग करके कुछ उदाहरणों पर विचार करें।

यहां, हम अपरकेस को दिए गए टेक्स्ट को प्रदर्शित करना चाहते हैं। यह पाइप का उपयोग निम्नानुसार किया जा सकता है -

में app.component.ts फ़ाइल, हमने शीर्षक चर को परिभाषित किया है -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
}

कोड की निम्नलिखित लाइन में जाता है app.component.html फ़ाइल।

<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

ब्राउज़र निम्न स्क्रीनशॉट में दिखाया गया है -

कोणीय 6 कुछ अंतर्निहित पाइप प्रदान करता है। पाइप नीचे सूचीबद्ध हैं -

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

हमने लोअरकेस और अपरकेस पाइप पहले ही देखे हैं। आइए अब देखते हैं कि दूसरे पाइप कैसे काम करते हैं।

कोड की निम्नलिखित पंक्ति हमें आवश्यक चर को परिभाषित करने में मदद करेगी app.component.ts फ़ाइल -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   todaydate = new Date();
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
            "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}

हम पाइप का उपयोग करेंगे app.component.html फ़ाइल।

<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Uppercase Pipe</h1>
      <b>{{title | uppercase}}</b><br/>
      <h1>Lowercase Pipe</h1>
      <b>{{title | lowercase}}</b>
      <h1>Currency Pipe</h1>
      <b>{{6589.23 | currency:"USD"}}</b><br/>
      <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
      <h1>Date pipe</h1>
      <b>{{todaydate | date:'d/M/y'}}</b><br/>
      <b>{{todaydate | date:'shortTime'}}</b>
      <h1>Decimal Pipe</h1>
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
   </div>
   <div style = "width:40%;float:left;border:solid 1px black;">
      <h1>Json Pipe</h1>
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1>
      <b>{{00.54565 | percent}}</b>
      <h1>Slice Pipe</h1>
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index
   </div>
</div>

निम्नलिखित स्क्रीनशॉट प्रत्येक पाइप के लिए आउटपुट दिखाते हैं -

कैसे एक कस्टम पाइप बनाने के लिए?

एक कस्टम पाइप बनाने के लिए, हमने एक नया बनाया है tsफ़ाइल। यहां, हम बनाना चाहते हैंsqrtकस्टम पाइप। हमने फ़ाइल को एक ही नाम दिया है और यह इस प्रकार है -

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

एक कस्टम पाइप बनाने के लिए, हमें कोणीय / कोर से पाइप और पाइप ट्रांसफॉर्म को आयात करना होगा। @Pipe निर्देश में, हमें अपने पाइप को नाम देना होगा, जिसका उपयोग हमारे .html फ़ाइल में किया जाएगा। चूंकि, हम sqrt पाइप बना रहे हैं, हम इसे sqrt नाम देंगे।

जैसा कि हम आगे बढ़ते हैं, हमें वर्ग बनाना होगा और वर्ग का नाम है SqrtPipe। यह वर्ग लागू करेगाPipeTransform।

कक्षा में परिभाषित रूपांतरण विधि संख्या के रूप में तर्क लेगी और वर्गमूल लेने के बाद संख्या वापस करेगी।

चूंकि हमने एक नई फ़ाइल बनाई है, इसलिए हमें उसी में जोड़ना होगा app.module.ts. यह निम्नानुसार किया जाता है -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

हमने बनाया है app.sqrt.tsकक्षा। हमें उसी में आयात करना होगाapp.module.tsऔर फ़ाइल का पथ निर्दिष्ट करें। यह भी घोषणाओं में शामिल किया गया है जैसा कि ऊपर दिखाया गया है।

चलिए अब sqrt पाइप में की गई कॉल को देखते हैं app.component.html फ़ाइल।

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

आउटपुट निम्नानुसार है -