Custom Pipe in Angular

*Pipe class created by developer towards the requirement of an app is called "custom pipe"

*Custom pipe creation requires "Pipe decorator" and Pipe Transform interface

*Any pipe is a class, which implements PipeTranform interface and provides functionality to transform method

*syntax:
   @Pipe({
      name:'..',
      pure:true|false
        })
  export class <pipeclassname> implements PipeTransform
  {
    transform(value:..,args:..):..
    {
     ->1st para value will receive data to be transformed into required format
     ->2nd para args will receive an option[s],it is an optional
    }
  }

   pinfo.name|lowercase               
                |                                     
              transform                           
              (value,args)                       
                {..}                               

value is nothing but name
lowercase is the pipeclassName 

pinfo.aprice|currency:"INR":"symbol"
                |                                                                          
              (value,args)                        
                {..}                              
value is aprice
args is INR, Symbol



Let us understand the need of Angular Custom Pipe with an example.
Suppose, 

.TS Changes

import { Component } from '@angular/core';
@Component({
  selector: 'app-ngpipesdemo',
  templateUrl: './ngpipesdemo.component.html',
  styleUrls: ['./ngpipesdemo.component.css']
})
export class NgpipesdemoComponent {
  Employee: any[] = [
    {
        ID: 'EMP1', Name: 'RaJAKonda UDAY',
        DOB: '12/8/1988', Gender: 'Male', Salary: 12300084.56
    },
    {
        ID: 'EMP2', Name: 'ANURAG Mohanty', 
        DOB: '10/14/1989', Gender: 'Male', Salary: 6666.00
    },
    {
        ID: 'EMP3', Name: 'KitTU', 
        DOB: '7/24/1992', Gender: 'Male', Salary: 6543.15
    },
    {
        ID: 'EMP4', Name: 'ADcd', 
        DOB: '8/19/1990', Gender: 'Female', Salary: 9000.50
    },
    {
        ID: 'EMP5', Name: 'SamBIt SataPATHY',
        DOB: '4/12/1991', Gender: 'Male', Salary: 9876.54
    }
];
}

.html Changes

<table border="1">
    <thead>
        <tr>
            <th>Emp ID</th>
            <th>Name</th>
            <th>DOB</th>
            <th>Gender</th>
            <th>CourseFee</th>            
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let emp of Employee'>
            <td>{{emp.ID | uppercase}}</td>
            <td>{{emp.Name | titlecase}}</td>
            <td>{{emp.DOB | date:'dd/MM/yyyy'}}</td>
            <td>{{emp.Gender | lowercase}}</td>
            <td>{{emp.Salary | currency:'USD':true}}</td>
        </tr>
    </tbody>
</table>


When we run the above code, without custom pipe we will get the below output











As you can here we have applied some built-in pipes to format the data.

Now, the requirement changes, now they want to show the title depending on the gender of the student I.e. we need to add Mr. or Miss. prefixed before the name.

Only solution is custom Pipe

Creating Angular Custom Pipe using Angular CLI:
ng g pipe custompipe --flat







custompipe.pipe.ts

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

@Pipe({
  name: 'custompipe'
})
export class CustompipePipe implements PipeTransform {

  transform(name: string, gender: string): string {
    if (gender.toLowerCase() == "male")
        return "Mr. " + name;
    else
        return "Miss. " + name;
  }
}


Understanding above code:
First, we import the Pipe decorator and PipeTransform interface from the Angular core Library.
Then we decorated the “CustompipePipe” class with the Pipe decorator so that this class will become an Angular pipe.
We then set the name property of the pipe decorator to custompipe so that we can use this name (Custompipe) on any HTML page where we want this pipe functionality.
The CustompipePipe class implements the PipeTransform interface and that interface has one method called transform() and here we implement that method.
As you can see in the above code, the transform method takes 2 parameters (name and gender). The name parameter will receive the name of the employee whereas the gender parameter will receive the gender of the employee. The method returns a string i.e. Mr. or Miss. prefixed to the name of the employee depending on their gender.
We need to register the custom pipe in appModule.ts


















Make changes to html as shown below





















Output












2 Requirement is 

 project
     |
  component1--> dom|date:"EEE MMMM dd/MM/y hh24:mm:ss a"

  component2--> dop|date:"EEE MMMM dd/MM/y hh24:mm:ss a"
    ...                   |
              repetition of date format across component
                          |
             this will not be easy to maintain in the real time
                          |
             the solution is customdate pipe creation


Example

Create a custom pipe first

ng g p customdate --flat










.ts changes

import { Component } from '@angular/core';
@Component({
  selector: 'app-ngpipesdemo',
  templateUrl: './ngpipesdemo.component.html',
  styleUrls: ['./ngpipesdemo.component.css']
})
export class NgpipesdemoComponent {
    pinfo={"name":"dEll",
    "desc":"dell i5 proc with 16gb ram",
    "aprice":50000.55347,
    "oprice":25000.76655,
    "dom":new Date()};
}

.html

<div style="font-size:x-large">
    name: {{pinfo.name|lowercase}} - {{pinfo.name|uppercase}} <br>
    desc: {{pinfo.desc|titlecase}} <br>
   price: {{pinfo.aprice|currency:"INR":"symbol"}} <br>
  oprice: {{pinfo.oprice|number:"1.2-2"}} <br>
    disc  : {{(pinfo.oprice/pinfo.aprice)|percent}} <br>
   dom  : {{pinfo.dom|customdate|lowercase}}
</div>

customdatepipe.ts

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customdate'
})
export class CustomdatePipe extends DatePipe implements PipeTransform {
  override transform(value: Date|string|number): string|null;
  override transform(value: null|undefined): null;
  override transform(value: Date|string|number|null|undefined): string|null;
  override transform(value: Date|string|number|null|undefined): string|null {
      return super.transform(value,"EEE MMM dd/MM/y hh:mm:ss a");
  }
}


OutPut











Note:
-----
Whenever date format need to be changed, developer can change format with
in customdate.pipe.ts
      ...
return super.transform(value,"EEEE MMMM dd/MM/y hh:mm:ss a");
                                   |
                        this change will be reflected accross different components

*pure-true|false [default is true]
   
      true[pure pipe]--single instance of pipe class created for different usages
                       is called "pure pipe"
                       eg: lowercasepipe,uppercasepipe,..

    false[impure pipe]--unique instance of pipe class created to each usage is
                        called "impure pipe"
                        eg: asyncpipe 

*pure pipe provides better performance over impure pipe

Pipes in Angular

 Pipes can be used to transform | convert data into required format. In other words, we can say that it is filter used in angular for formatting the data.

A pipe is technology clas that implements pipe transform Base Class.

*syntax:
   <varname>|<pipename>

Angular is providing so many built-in pipes:

 1.lowercasepipe--it will convert string into lowercase

 2.uppercasepipe--it will convert string into uppercase

 3.titlecasepipe--it will convert string into proper case
       eg:
         name="rAjakonda uDAy"

      name| titlecase ---->Rajakonda Uday

 4.slicepipe---it will provide substring based on start index and end index[-1] 
    syntax:
         <varname>|slice:startindex:endindex[-1]

     eg:
       s="abcdefg"

       s|slice:2:4 -->cd
       s|slice:2   -->cdefg

Here it is -1 so it is going to start after 2 that is 3,4 index it will display.
If we dont give end index, it will display till End.

5.decimalpipe[numberpipe]--it will round a number to specified fraction size,default is 3
     syntax:
         <varname>|number:"minintpart.minfracsize-maxfracsize"
      
        n-6543.53465

        n|number:"1.4-4" -->6543.5347

Here in the above case minintpart means 6543
min frac size and max frac size both are 4 -->So it will round to 4 digits, but in the 4 digit we have a number that is 6 it greater than or equal to five so the next number it will display that is 7 instead of 6.


       n|number:"1.2-2" -->6543.53
In the above case , it will display minintpart--6543
min frac size and max frac size both are 2 --> So it will round to 2 digits, but in the 2 digit we have a number that is 3 , it is less than or equal to five, so the same number will display.
        
n|number:"5.0-0" -->06544
In the above case , it will display minintpart--6543
0,0 means no decimal part, this will be rounded so we have 6543.53465--> so it will round to next number in the min int part that is 6544. Here i am telling min part is 5 but i have a number with 4 digits only. so it will add 0 at the begining.




 price    -->  price|number:"5.0-0"  --> price
    |                                       |
  1000                                    01000
  10000                                  10000
   100                                     00100




  6.currencypipe--it will display a number with specified currency symbol |code,
                  it will round to 2 decimals by default
         syntax:
            <varname>|currency:"currencycode":"options":"minintpart.minfracsize-maxfracsize"


          currencycode-----> USD[default]
                             INR
                             CAD
                             EUR

            options ------->symbol[default]
                            symbol-narrow[it will show narrow currency symbol]
                            code [it will show currency code]

   symbol-narrow is required,if the country is having 2 currency symbol
      like canada--> symbol--$
                     symbol-narrow--CA$

 7.percentpipe--this is used to display percentage

 8.datepipe--this is used to display a date in required format
    syntax:
          <datevar>|date:"format"

    format:
      shortDate--it will display MM/dd/yy
             d --date with single digit[1-9]
            dd --date with multi digit [01-09]
            M  --month with single digit[1-9]
           MM  --month with multi digit[01-09]
          MMM  --month with 3 chars[jan-dec]
         MMMM  --month with complete chars[january-december]
           yy  --year without century[22]
     y or yyyy --year with century[2022]
         EEE   --weekday with 3 chars[mon-sun]
        EEEE   --weekday with complete chars[monday-sunday]
          hh   --hours
          hh24 --hours with 24 format[1-24]
          mm   --minutes
          ss   --seconds
           a   --it will show am|pm
          ...
  9.jsonpipe--it will convert typescript object into json object
 10.asyncpipe--it will provide asynchronous execution,this is mostly used with
               ngfor

               <tr *ngFor="let c of cates|async">  -->async makes parallel exec of
                    ...                               2 ngfor's
               </tr>

               <tr *ngFor="let p of prods">
                     ...
               </tr>
*@angular/common package is providing all the pipes.

Note: at a single time. only one ngFor will execute in angular. so in the above case i have given async, so both ngFor will execute Now.


Example


Create a component









.TS Changes

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

@Component({
  selector: 'app-ngpipesdemo',
  templateUrl: './ngpipesdemo.component.html',
  styleUrls: ['./ngpipesdemo.component.css']
})
export class NgpipesdemoComponent {
  pinfo={"name":"dEll","desc":"dell i5 proc with 16gb ram",
  "aprice":50000.55347,"oprice":25000.76655,"dom":new Date()};
}


.html Changes

<div style="font-size:x-large">
    name: {{pinfo.name|lowercase}} - {{pinfo.name|uppercase}} <br>
    desc: {{pinfo.desc|titlecase}} <br>
   price: {{pinfo.aprice|currency:"INR":"symbol"}} <br>
  oprice: {{pinfo.oprice|number:"1.2-2"}} <br>
  disc  : {{(pinfo.oprice/pinfo.aprice)|percent}} <br>
   dom  : {{pinfo.dom|date:"EEE MMM dd/MM/y hh:mm:ss a"|lowercase}}
</div>


Understanding Above Code

lowercase--> It is displaying the name as lower case as well as uppper case
desc-->we are using titlecase, so it will display first letter as capital in each word.
price-->Default it will round to 2 decimals, but the third digit is less than 5 so it will remain same.
oprice-->Default it will round to 2 decimals, but the third digit is greater than 5 , so it will
round to next digit.
 dom->Complete output, i am use lowercase.

Output
















If, we remove that lower case, then the output will be 

















Note:

1.angular supports chain of pipes[i.e more than one pipe can be applied to a variable]
   eg:
    {{pinfo.dom|date:"EEE MMM dd/MM/y hh:mm:ss a"|lowercase}}
                  |                                 |
                output----------------------------------------------

    
2.check currency pipe with symbol and symbol-narrow using CAD
   eg:
    price: {{pinfo.aprice|currency:"CAD":"symbol"}}               --> $50000.55
  
    price: price: {{pinfo.aprice|currency:"CAD":"symbol-narrow"}} --> CA$50000.55




slice:
It is an array pipe used to extract values from any array based on  given index.
Syntax

public sales= [2300,4000,5000,300];

{{ sales |slice : 1 :3  }}





2 Example

We are going to apply pipes to a table

.ts Changes


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

@Component({
  selector: 'app-ngpipesdemo',
  templateUrl: './ngpipesdemo.component.html',
  styleUrls: ['./ngpipesdemo.component.css']
})
export class NgpipesdemoComponent {
  Employee: any[] = [
    {
        ID: 'EMP1', Name: 'RaJAKonda UDAY',
        DOB: '12/8/1988', Gender: 'Male', Salary: 12300084.56
    },
    {
        ID: 'EMP2', Name: 'ANURAG Mohanty', 
        DOB: '10/14/1989', Gender: 'Male', Salary: 6666.00
    },
    {
        ID: 'EMP3', Name: 'KitTU', 
        DOB: '7/24/1992', Gender: 'Male', Salary: 6543.15
    },
    {
        ID: 'EMP4', Name: 'ADcd', 
        DOB: '8/19/1990', Gender: 'Female', Salary: 9000.50
    },
    {
        ID: 'EMP5', Name: 'SamBIt SataPATHY',
        DOB: '4/12/1991', Gender: 'Male', Salary: 9876.54
    }
];
}


.html 

<table border="1">
    <thead>
        <tr>
            <th>Emp ID</th>
            <th>Name</th>
            <th>DOB</th>
            <th>Gender</th>
            <th>CourseFee</th>            
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let emp of Employee'>
            <td>{{emp.ID | uppercase}}</td>
            <td>{{emp.Name | titlecase}}</td>
            <td>{{emp.DOB | date:'dd/MM/yyyy'}}</td>
            <td>{{emp.Gender | lowercase}}</td>
            <td>{{emp.Salary | currency:'USD':true}}</td>
        </tr>
    </tbody>
</table>


Output