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