Create Custom Pipe

Introduction

In Angular we are having concept Custom pipe. Here we learn how to apply Custom Pipe to our particular component as per the requirement. With Using these it is possible to reduce lines of code in your program. And used Similar pipe to other project also.

What is Pipe ?

A Pipe is nothing but the transform data before displaying it. for e.g Suppose you are having one name in your database i.e name : "Bond" and displaying in your UI "Mr. Bond". Here i am taking table data of some employee and converted there name to Mr. name.

Requirement

So we can create our component for employee details. Used command ng g c EmployeeComponent in terminal and open TypeScript File write array to display data in your table.

Code For First Component using Content of first table TypeScript File

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

@Component({
  selector: 'app-linkedin-custom-pipe1',
  templateUrl: './linkedin-custom-pipe1.component.html',
  styleUrls: ['./linkedin-custom-pipe1.component.css']
})
export class LinkedinCustomPipe1Component  {

  data=[{name:" Vaibhav",gender:"M",rol:"Angular Developer"},
           {name:" Vijaya",gender:"F",rol:"React Developer"},
           {name:" Sandip",gender:"M",rol:"Nodejs Developer"},
           {name:" Tanmaya",gender:"F",rol:"Vue.js Developer"},
           {name:" Atul",gender:"M",rol:"Java Developer"}];
}

EmployeeComponent HTML File

<div>  
     <div><h2>****Employee Details****</h2> 
     </div>   
      <div><table><tr><th>Sr.No</th><th>Name</th><th>Gender</th><th>Roll</th></tr><tr *ngFor="let item of data ; let i=index"><td>{{i+1}}</td><td>{{item.name }}</td><td>{{item.gender}}</td><td>{{item.rol}}</td></tr></table></div>
</div>    
      

EmployeeComponent CSS File

th,td
{ border: 1px solid black;
    padding: 22px; }
table
    {   position: absolute;  }   

PipeComponent

For the creation of pipecomponent used command ng g p PipeComponent/pipe. It define inside the PipeComponent folder create four files. But we need only one TypeScript File. Because our logic inside this file . Pipe need two packages i.e Pipe, PipeTransform and it is imported from angular core. With the help of two packages implement a Custom Pipe. This pipe using transform method which is pre-declare in PipeTransform package.

Pipe Component TypeScript File (Second Component)-

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

@Pipe ({
    name : "convert"
})
export class MrPipe implements PipeTransform
{  transform(value:string,param:string):string
    {
                 if(param=="M")
                 { return "Mr."+ value; }
                 else
                 {  return "Ms." + value;  }     }      }  

In Above transform method consist two arguments and the first define data name from whole array its come automatically when we call pipe. Second arguments define data gender from whole array it not come automatically we passsed gender variable from pipe which is present in array. This gender value from array passing to param variable and compare to "M" if it is true then return "Mr." + value or else "Ms." + value.

How to call our PipeComponent in EmployeeComponent HTML ?

Syntax :- {{____ | pipename : variable pass}}

In Our Case Pipe Name is convert and passed variable gender from array only for comparison with first. let see our EmployeeComponent HTML file and call pipe after item.name.

Update code in EmployeeComponent HTML file.

 <td>{{item.name | convert: item.gender }}</td>

Register both Employee And Pipe Component in app.module.ts file. and add only Employee Component selector name in your app.component.html file.

Output -



Conclusion - Transform Data as per requirement to apply our own Custom Pipe.