Pipes

What are Pipes?

Pipes are used in Angular to format data, e.g., numbers, dates, currency

Angular Built-In Pipes

• uppercase

• lowercase

• number

• date

• currency

Built in pipes are imported by default

Using Pipes

{{ data-expression | pipe-name:param1:param2 }}

// example
birthday: Date = new Date(1985, 5, 1);
{{ birthday | date:"M-dd-yyyy" }}
// outputs 5/01/1985

Pipes can be chained together and are processed from left to right:

birthday = new Date(1985, 5, 1);

{{ birthday | date:"MMMM-dd-yyyy" | uppercase }}

// output: MAY-1-1985

Using Pipes in Code

Internationalized Pipes

// set for entire application
providers: [{provide: LOCALE_ID, useValue: 'es-mx'}]

// or

// for a given item
{{ birthday | date:"MM-dd-yyyy":"":"es-mx" }}

Pipes like date, number, currency are effected by locale if it is set.

Date Pipe

Date pipes allow custom date formatting including timezone and locale specific formatting.

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

• 'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).

• 'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).

• 'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).

• 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).

• 'shortDate': equivalent to 'M/d/yy' (6/15/15).

• 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).

• 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).

• 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).

• 'shortTime': equivalent to 'h:mm a' (9:03 AM).

• 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).

• 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).

• 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

Decimal Pipe

Used to convert numbers to a decimal format and allows the developer to set the formatting. When combined with locale it will apply I18N.

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

{{ 123.456 | number:"2.2-2" }}
> 123.46

{{ 123.454 | number:"4.1-2" }}
> 0,123.45

Numbers are rounded, not truncated

Currency Pipe

The currency pipe allows the developer to format numbers into currency formats in a variety of ways. It also uses the decimal pipe's number formatting.

Creating a Custom Pipe

Filter and OrderBy Pipes

Another use for pipes is filtering or ordering data before being handled by a structural directive like *ngFor. The transform function of the pipe can perform the sorting or filtering before returning the data.

Pure and Impure Pipes

There are two types of pipes, pure and impure. Pipes are pure by default and all the pipe examples so far have been pure. You can make a pipe impure by adding {pure: false} to the pipe decorator.

Pure pipes only execute when there is a change to a simple type (string, boolean, number, etc) or change an object reference (array, function, object, date). Angular will ignore changes to composite objects like these as it is much quicker to check a reference change than to check every property of an object.

Impure functions take a lot more processing power, so choose wisely.

Prefer pure pipes over impure pipes.

Summary

• What are pipes?

• What built-in pipes exist and how to use them

• How to create a custom pipe

• How pipes can be used for filtering and sorting

• Pure vs Impure Pipes