Pipes were formerly known as filters in Angular.js 1, from Angular 2 onwards its called pipes. Angular.js uses pipes to transform data on a template. Input to pipes are data that you want to transform to a desired output. Normally when you want to transform data you have to write the code in the component for example if you want to change the date format to 12-08-2020 you need to write the code in the component. Instead of this we can use a built-in pipe called DatePipe which will take input and transform into your desired format. Pipe operators can be used to utilize pipes in your template. Angular.js has many built-in pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe. 

Lets see an example of using built-in pipes.

We will use LowerCasePipes to transform the text into lower case.

In lowercase: <pre>'{{ 'EdUpALa'| lowercase}}'</pre>

Our string is transformed into lowercase using the built in lowerCasePipe. ‘|’ is the pipe operator used to transform expressions. The pipe operator passes the result of expression on the left to a pipe function on the right.

CurrencyPipe

It formats a number as a currency input, changing it to a custom currencies format.

{{ value_expression | currency [ : currencyCode [ : display [ : digitFormat [ : locale ] ] ] ] }}

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

@Component({
  selector: 'app-root',
  template: `
    

      {{ amount | currency:'USD':'symbol' }} : {{ amount | currency:'USD':'symbol' }}
    
    

      {{ amount | currency:'INR' }} : {{ amount | currency:'INR' }}
    
    

      {{ amount | currency:'INR':'code' }} :  {{ amount | currency:'INR':'code' }}
    
    

      {{ amount | currency:'INR':true:'.2'}} :  {{ amount | currency:'INR':true:'.2'}}
    
    

      {{ amount | currency:'INR': 'symbol-narrow' }} :  {{ amount | currency:'INR': 'symbol-narrow' }}
    
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  amount = 100000;

  constructor() {
  }

}