Angular Pipes என்றால் என்ன?

நாம் output-ல் display செய்யப்படும் தகவலானது(data) எந்த format-ல் display செய்யப்பட வேண்டும் என்று விரும்புகிறீர்களோ அந்த format-ல் display செய்வது தான் இந்த pipe-ன் வேலை ஆகும்.
ex:
நான் display செய்யும் sentence அனைத்தும் Capital Letter-ல் காண்ப்பிக்க விரும்பினால் upper case pipe என்ற pre-defined pipe-யை பயன்படுத்துவேன்.இதே போன்று நிறைய pre-defined pipes இருக்கின்றது.
இது தான் pipe-ன் உடைய symbol(|) ஆகும்.
pipe symbol-க்கு வலது பக்கம் நீங்கள் எந்த format-ல் காண்பிக்க விருப்பமோ,அந்த வகையை சேர்ந்த pipe-யை கொடுக்க வேண்டும்.

app.component.ts:



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



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {



  Hobby:string="Reading Books";



}

app.component.html:



<h2>{{Hobby | uppercase}}</h2>

Hobby என்பதில் Reading Books என்ற மதிப்பு சேமிக்கப்பட்டுள்ளது.
Hobby-ல் இருக்கும் மதிப்பு அனைத்தையும் capital letter-ல் காண்பிக்கின்றது.
Custom Pipes:
custom pipe என்பது உங்களுக்கு தேவையான pipe-னினை நீங்களே உருவாக்குவது தான் custom pipe ஆகும்.

PIPE Generate Command:

ng g p pipe_name



Ex:

ng g p addFive 



இந்த command கொடுத்தவுடன் இரண்டு file generate ஆகும்.

CREATE src/app/add-five.pipe.spec.ts 

CREATE src/app/add-five.pipe.ts 

add-five.pipe.ts:



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



@Pipe({

  name: 'addFive'   // இது தான் pipe name.இதனை தான் நாம் பயன்படுத்த வேண்டும்.

})

export class AddFivePipe implements PipeTransform {



  transform(value: any): any {

    return value+5;  // கொடுக்கப்படும் மதிப்புடன் 5 என்ற மதிப்பை  சேர்த்து கூட்டுவது ஆகும். 

  }



}

addFive என்பது ஒரு custom pipe ஆகும்.இந்த pipe-ன் வேலை என்னவென்றால் நாம் கொடுக்கும் மதிப்புடன்(value) 5 என்ற மதிப்பை சேர்த்து கூட்டுவது ஆகும்.
ex:
நான் 1 என்று கொடுத்தால் அதனை 5 என்ற மதிப்புடன் Add செய்து 6 என்ற மதிப்பு நமக்கு கிடைக்கும்.

app.module.ts:


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

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

import {FormsModule} from '@angular/forms'; 

import { AppRoutingModule } from './app-routing.module';

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

import { AddFivePipe } from './add-five.pipe';

 //இங்கு import செய்யப்பட்டுள்ளது.  


@NgModule({

  declarations: [

    AppComponent,

   

    AddFivePipe   //இங்கு declare செய்யப்பட்டுள்ளது.

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule 

  ],



  providers: [],

  

  bootstrap: [AppComponent]



})

export class AppModule { }

app. component.ts:



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



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {



  values:any=[1,2,3,4,5];



}



இங்கு values என்பது ஒரு array ஆகும்.
அதனுள் 1 முதல் 5 வரை மதிப்பு கொடுக்கப்பட்டுள்ளது.

app. component.html:


<div *ngFor="let data of values">

    {{data | addFive}}

</div>

OUTPUT

6
7
8
9
10


*ngFor என்பது structural directive ஆகும்.
values-ல் இருக்கும் மதிப்பை ஒவ்வொன்றாக எடுத்து அதனை data என்ற variable-ல் சேமிக்கிறேன்.
இந்த data-வில் இருக்கும் மதிப்பானது addFive-ல் இருக்கும் pipe உடன் சேர்ந்து ஒரு மதிப்பினை கொடுக்கிறது.
அதாவது,data-வில் இருக்கும் முதல் மதிப்பு 1 என்பது இந்த addFive-ல் இருக்கும் 5 என்ற மதிப்புடன் சேர்ந்து 6 என்று நமக்கு output-ல் காண்பிக்கிறது.