A pipe is a native Angular element, which takes data in input and transforms it to a specified kind of output.

It is mainly for simple display arrangements.

𝐓𝐡𝐞𝐫𝐞 𝐚𝐫𝐞 𝐭𝐰𝐨 𝐤𝐢𝐧𝐝𝐬 𝐨𝐟 𝐩𝐢𝐩𝐞𝐬:

―𝐍𝐚𝐭𝐢𝐯𝐞 𝐩𝐢𝐩𝐞𝐬 which are directly available in your templates:

Your birthday is the {{ birthday | date }}

Here, in the example above, we use the pipes to transform a date in a pretty format, easy to read for the user.

The available pipes in Angular are: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe & PercentPipe.

―𝐂𝐮𝐬𝐭𝐨𝐦 𝐩𝐢𝐩𝐞𝐬 that cover cases not covered by Angular:

𝐘𝐨𝐮 𝐜𝐚𝐧 𝐜𝐨𝐦𝐛𝐢𝐧𝐞 𝐩𝐢𝐩𝐞𝐬:

 {{ birthday | date | uppercase }}

𝐈𝐧 𝐜𝐨𝐧𝐜𝐥𝐮𝐬𝐢𝐨𝐧, Pipes allows doing low complexity data transformations inside templates.

For more complex transformation, you would rather use services or dedicated components.