Pipes and built-in pipes in Angular

Introduction to Angular Pipes

In every application, the key aspect is the user interface. We get data and show it to the users in a formatted way. Formatted data serves a better user experience. Angular pipes are used to transform data in the HTML template. Angular pipes are like filters in Angular 1.x version. Suppose we have got one data value as 1456789. To show it to the user we can format it as 14,56789 which is more user-friendly to read and understand. We can use the pipe here to make our task easy. Similar way if we want to show some number as currency. We can use currency pipe with arguments. Passing arguments to a pipe give us full control to handle pipes. 
  • Use pipe | syntax to format the output data. 
  • Pipes are used for making the string outputs in either uppercase or lowercase. 
  • Showing data such as the date in a readable format to the user. 
  • Pipes chaining can be done. Can be written as {{ data | pipe1 | pipe2 }}.
  • The pipe will take data of type any.
  • We can pass parameters to a pipe which is optional. Parameterizing a pipe is done to have more control over displaying the data.
  • We can pass parameters to a pipe using colon(:) symbol.
  • Built-in pipes such as DatePipe, LowerCasePipe, UpperCasePipe, CurrencyPipe, DecimalPipe, etc.

Examples

Pipes are used extensively in Angular projects to display the raw data in a desirable format. Now we will see different pipes in our example below:
CurrencyPipe
This pipe is used to display currencies in a formatted way. 
import { Component } from '@angular/core';

@Component({
  selector: 'app-currency-pipe-example',
  template: `<p> {{ amount | currency:'USD' }} </p> // $10,500
                   <p> {{ amount | currency:'CAD' }}</p> //  CA$10,500
                   <p> {{  amount | currency:'CAD' :'code' }}</p> // CAD10,500
                   <p> {{  amount | currency:'CAD' :'symbol' }}</p> // CA$10,500
                   <p> {{  amount | currency:'CAD' :'symbol-narrow' }}</p> // $10,500
               `
})
export class CurrencyPipeExampleComponent {
    amount = 10500;
}

DatePipe
This pipe is used to display dates in a user-friendly format.
import { Component } from '@angular/core';
@Component({
selector: 'app-date-pipe-example',
template:`<div>
          <p>{{ dateVal | date: 'shortDate' }}</p> // This is equivalent to M/d/yy
          <p>{{ dateVal | date: 'fullDate' }}</p> // This is equivalent to 'EEEE, MMMM d, y'
          <p>{{ dateVal | date: 'shortTime' }}</p> // This is equivalent to 'h:mm a'
         </div>
               `
})
export class DatePipeExampleComponent {
    dateVal = new Date();
}

DecimalPipe
This pipe transforms and displays decimal data. The argument passed to this pipe is in the format as "{minimumIntegerDigits}. {minimumFractionDigits}-{maximumFractionDigits}"

import { Component } from '@angular/core';
@Component({
  selector: 'app-decimal-pipe-example',
  template: `<div>
                <p>{{ 5.12456899 | number: '2.1-2' }}</p> // 05.12
                <p>{{ 5.12456899 | number: '1.4-4' }}</p> // 5.1246
             </div>`
})
export class DecimalPipeExampleComponent {

}

JsonPipe
This pipe converts javascript object into a JSON string.

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

@Component({
  selector: 'app-json-pipe-example',
  template: `{{ emp | json }}` // Output will be : { id: '11', details: { name: 'Jay' }}
})
export class JsonPipeExampleComponent {
     employee =  { id: '11', details: { name: 'Jay' }} ;
}

PercentPipe
This pipe formats a number into percent.
import { Component } from '@angular/core';
@Component({
  selector: 'app-percent-pipe-example',
  template: `<div>
                <p>{{ 5.124 | percent }}</p> // 0.05124%
                <p>{{ 5.12456899 | percent: '1.4-5' }}</p> // 0.05125%
             </div>`
})
export class PercentPipeExampleComponent {

}

Comments