Understanding Pipe In Angular With Examples

In this article, we will learn about the fundamentals of Pipe in Angular. Some of the important topics mentioned below will be discussed in this article:

1. What is Pipe in Angular?
2. Build-in Pipes in Angular and with examples.
3. How to parameterize a Pipe?
4. What is a custom Pipe?
5. How to create a custom pipe in Angular?

What is Pipe in Angular?

Pipe is used to transform bound properties before displaying in UI. It takes in data as input and transforms it to a desired output.

 Some of key features include:

• Pipe “|” symbol is used to define a pipe.
• Chaining of pipes can be possible with other pipes like {{inputData | Pipe1 | Pipe2}}
• Pipes arguments can be provided by using the colon (:) sign.

Build-in Pipes in Angular and with examples

Angular comes with build-in pipes such as 

• Date: Formats a date according to locale rules.
• UpperCase: Transforms string to uppercase
• LowerCase: Transforms string to lowercase
• Decimal: Formats a number according to locale rules.
• Currency: Formats a number as currency using locale rules.
• Percent: Formats a number as a percentage.
• JSON: Converts value into a string using JSON.stringify. Useful for debugging.
• Slice: Creates a new List or String containing a subset (slice) of the elements.
• Async: subscribes to an observable or a promise and returns the last emitted value.

Let’s understand these with an example:

How to parameterize a Pipe?

A pipe may accept any number of optional parameters to fine-tune its output. We add parameters to a pipe by following the pipe name with a colon (: ) and then the parameter value (e.g., currency:'INR'). If our pipe accepts multiple parameters, we separate the values with colons (e.g. slice:1:5)

What is a custom Pipe?

A custom pipe can be used for applying our own logic to transform text based on the requirement. @Pipe decorator is used to create a custom pipe.

How to create a custom pipe in Angular?

For the sake of simplicity, we create a simple custom pipe that will calculate months or days, or year based on the date. The use case would be to identify the age from date of birth or calculate tenure based on the date of joining etc.

To create a custom pipe using Angular CLI command, > ng g p <folder/pipename>

The pipe class implements the PipeTransform interface's transform method that accepts an input value (which you will get from the property where we are applying the pipe) followed by optional parameters as an argument and returns the transformed value. Inside transform method we can put some logic based on the requirement.

There will be one additional argument to the transform method for each parameter passed to the pipe.

NOTE: If you are creating a custom pipe manually, it must be registered manually in app.module.ts. We must include our pipe in the declarations array of the AppModule.

Example 1

In this example, we will calculate employee tenure based on the DOJ date. The transform logic needs to modify in the custom pipe that we created.

In the component HTML file, use the custom pipe as like {{input | custom}}.

Here, we are calling a custom pipe with a parameter using a colon, and 'm' is the format param and returns in months.

UI displays the employee tenure in months.

Example 2

Let’s understand another example of a custom pipe.

Use Case - Based on the input search text, we want to filter data from a list.

Here is the sample code.

Happy Learning!

Disclaimer: This article is a beginner's guide.