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.

{{currentDate | date: 'medium' | uppercase}}

The date pipe has a ‘medium’ parameter which will first format the date object, the following uppercase pipe will convert all the alphabets from the output of the date pipe into uppercase alphabets. The final output will be as follows.

NOV 28, 2018, 10:57:47 PM

Without the uppercase pipe the output would have been.

{{currentDate | date: 'medium'}}
Nov 28, 2018, 11:00:45 PM