What are Pipes in Angular?

Pipes are simply a function that we can directly apply on any expression/value in a template to transform it into some other value.

The value on which we are applying the pipe is the input for our pipe function. The value returned from that function will be replaced in place original value.

Built-in pipes in Angular

Angular comes with many built-in pipes. Some of them include:

• uppercase(to convert string in upper case);
• lowercase(to convert string in upper case);
• date(to format the date into different types);
• json(to convert a value or object into JSON formatted string).

Examples of pipes in use:

<p>{{ 'Makesh' | uppercase }}</p><p>{{ 'Kumar' | lowercase }}</p><p>{{ { name: 'makesh' } | json }}</p>

Passing arguments to pipes

Pipes like date, currency will take arguments for pipe function, to pass argument follow the pipe name (currency) with a colon (:) and the parameter value (‘EUR’).

For example:

<p>{{ 100 | currency: 'INR' }}</p>
<p>{{ currentDate | date: 'dd/MM/yyyy' }}</p>

Chaining multiple pipes

To chain multiple pipes together, we just have to use a pipe operator (|) between different pipe names, see the below code for example

<p>{{ currentDate | date | uppercase}}</p>

Types of pipes

Pipes can be classified into:

1. Pure Pipes
2. Impure Pipes

1. Pure Pipes

A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.

2. Impure Pipes

An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes.