Pure vs Impure pipes

Angular pipes execute based on changes detected to the input value to which the pipe is applied. Based on how the changes should be detected there are 2 types of pipes Pure and Impure pipes.

By default pipes are pure in Angular. Pure pipes get executed when there is a change to the input value to the pipe. These changes include changes to primitive types like String, Number, Boolean etc, and changes to object references i.e when assignment happens to object, arrays etc.

Note that pure pipes get triggered only when the reference of the object/array is changed. Pure pipes will not get triggered when we add an element to an existing array (or) when we update a property of an input object, but will get executed when the input array is assigned with a different array or when an input object is assigned with a different object. When we add an element to the existing array the reference remains the same hence the pipe will not get executed.

Impure pipes get executed for every change detected to the component like a key press, mouse move etc. Impure pipes get executed more often when compared to pure pipes. Hence impure pipes should be implemented with greater care.

In some cases pure pipes might not solve the need, for example if we want a pipe to get executed based on addition/removal of elements from an array, then a pure pipe will not work, in these cases we should develop an impure pipe.

Angular Custom Pipes

In the previous posts we saw about the built-in pipes in Angular, their syntax, usage, chaining etc. Angular also provides us the ability to create our own custom pipes to suite our requirement. When we cannot use any of the built-in pipes for our requirement we can create a custom pipe. Also for larger applications, create custom pipes helps in reusing code/functionality.

Custom pipes are nothing but classes like Components and custom Directives, Custom pipe classes use the @Pipe decorator. The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value.

While creating the custom pipe class, use the @Pipe decorator and specify the name of the custom pipe as follows.

Angular chaining pipes

Chaining pipes is Angular nothing but arranging more than one pipe in sequence so that the input value gets transformed in stages through the various pipes chained together. The successive pipes in the chain should be separated by a pipe symbol.

{{<input value> | <pipe 1> | <pipe 2> | . . . | <pipe n>}}

While chaining pipes we can also specify parameters for any of the pipes in the chain, in which case the pipe and its parameter are separated by a colon (:) symbol. Parameters are optional, also we can selectively specify parameters for certain pipes in the chain and ignore for other pipes.

 {{<input value> | <pipe 1> : <parameter> | <pipe 2> | . . . | <pipe n> <parameter>}}

In the following example we will use a date pipe, followed by an uppercase pipe. The input value will be a date object which holds the current date.

Angular built-in pipes examples

Angular provides different types of built-in pipes like DatePipe, CurrencyPipe, Upper/Lower/Title case pipes etc. In this post we shall see examples of some of the commonly used built-in pipes.

DatePipe
DatePipe is used format date and time, it takes a Date object followed by a date pipe, followed by a formatting parameter which tells how the date should be formatted

<Date Object> | date : <format>

Following are some of the sample for DatePipe formatting.

Pipe	Output
{{ currentDate | date: 'short' }}	11/27/18, 11:56 PM
{{ currentDate | date: 'medium' }}	Nov 27, 2018, 11:58:42 PM
{{ currentDate | date: 'long' }}	November 27, 2018 at 11:58:08 PM GMT-5
{{ currentDate | date: 'shortDate' }}	11/28/18
{{ currentDate | date: 'mediumDate' }}	Nov 28, 2018
{{ currentDate | date: 'longDate' }}	November 28, 2018
{{ currentDate | date: 'shortTime' }}	12:02 AM
{{ currentDate | date: 'mediumTime' }}	12:02:05 AM
{{ currentDate | date: 'longTime' }}	12:02:05 AM GMT-5

CurrencyPipe
The CurrencyPipe transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

CurrencyPipe takes a number as input, followed by the currency pipe and a parameter to specify the required format.

<number> | currency : <format parameters>

Following are some of the sample for CurrencyPipe formatting.

Pipe	Output
{{ 1500.45 | currency }}	$1,500.45
{{ 1500.45 | currency : 'USD' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'symbol' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'code' }}	USD1,500.45

Angular built-in pipes

Angular pipes provide us an important feature of formatting / transforming data to a desired way in the view.

For example date formatting is one common requirement which we need in all applications. Angular provide different Date Pipes like shortDate, longDate, fullTime etc which come in handy to display different formats of dates in the UI.