Understanding Angular Pipes

Angular pipes are a way to transform the output data before sending it to the users’ view.

Types of Built-In Pipes that Angular provide

• DatePipe
• AsyscPipe
• JsonPipe
• CurrencyPipe
• LowerCasePipe
• UpperCasePipe
• DecimalPipe
• PercentPipe
• SlicePipe
• TitlePipe

Let’s take an example of DatePipe and see how these Pipes are used.

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

@Component({
 selector: 'hero-birthday',
 template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
 birthday = new Date(1988, 3, 15); // April 15, 1988
}

The focus here should be on the components template block:

<p>The hero's birthday is {{ birthday | date }} </p>

Inside the interpolation expression, you flow the component’s birthday value through the pipe operator ( | ) to the Date pipe function on the right. All pipes work this way.

Parameterizing a pipe

A pipe can accept any number of optional parameters to format its output. To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:'EUR').

Modify the birthday template which is used above to give the date pipe a format parameter. After formatting the hero’s April 15th birthday, it renders as 04/15/88:

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

Chaining pipes

You can chain pipes together in potentially useful combinations. In the following example, to display the birthday in uppercase, the birthday is chained to the DatePipe and on to the UpperCasePipe. The birthday displays as APR 15, 1988.

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" | upperCase }} </p>