How to Create Custom Pipe in Angular

In this tutorial, we will show you how to create an Angular Custom Pipe. The Pipes are a great way to transform the appearance of elements in the template. The Angular comes with some great built-in pipes like Date pipe, Currency pipe, and Number pipe, etc. But if these pipes do not cover your needs, then we can create our own pipe in Angular.

To create a custom pipe, first we need to create a pipe class. The pipe class must implement the PipeTransform interface. We also decorate it with @pipe decorator. Give a name to the pipe under name metadata of the @pipe decorator. Finally, we create the transform method, which transforms given value to the desired output.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

How to Create Custom Pipes

To create a Custom Pipe, first, You need to follow these steps

  1. Create a pipe class
  2. Decorate the class with @pipe decorator.
  3. Give a name to the pipe in the name meta data of the @pipe decorator. We will use this name in the template.
  4. The pipe class must implement the PipeTransform interface. The interfaces contain only one method transform.
  5. The first parameter to the transform method is the value to be transferred. The transform method must transform the value and return the result. You can add any number of additional arguments to the transform method.
  6. Declare the pipe class in the Angular Module (app.module.ts)
  7. Use the custom pipe just as you use other pipes.

Now let us create a Temperature converter pipe, which converts temperature from Celsius to Fahrenheit and vice versa.

Temparature Convertor Custom Pipe Example

Create a new Angular application. If you are new to Angular you can refer to the tutorial Create Angular Application.

We are using bootstrap 4 for styling. Hence open the index.html and add the following

Create a new file temp-convertor.pipe.ts. Under the folder src/app. Copy the following code and paste it.

Let us look at the code in details

We need to import the Pipe & PipeTransform libraries from Angular. These libraries are part of the Angular Core

We decorate TempConverterPipe class with @pipe decorator. The @pipe decorator is what tells Angular that the class is a pipe. the decorator expects us to provide a name to the pipe. We have given it as tempConverter. This is the name we must use in the template to make use of this pipe.

Our class must implement the PipeTransform interface.

The PipeTransform interface defines only one method transform. The interface definition is as follows.

The first argument value is the value, that pipe needs to transform. We can also include any number of arguments. The method must return the final transformed data.

The following is Our implementation of the transform method. The first is Value and the second is the Unit. The unit expects either C (Convert to Celsius) or F ( convert to Fahrenheit). It converts the value received to either to Celsius or to Fahrenheit based on the Unit.

Declare the Pipe

Before using our pipe, we need to tell our component, where to find it. This is done by first by importing it and then including it in declarations array of the AppModule.

Using the Custom Pipe

The custom pipes are used in the same as the Angular built-in pipes are used. Add the following HTML code to your app.component.html file

We use our pipe as follows. Fahrenheit is sent to the tempConverter as the first argument value. We use the | to indicate that the tempConverter is a pipe to angular. The C after the colon is the first argument. You can pass more than argument to the pipe by separating each argument by a : colon.

Using the TempConverter Pipe in Template
Using the TempConverter Pipe in Template

app.component code

Run the application and test it. I

Angular Custom Pipe Example
Angular Custom Pipe Example

Reference

  1. Pipe decorator
  2. PipeTransform Interface

Read More

  1. Angular Pipes

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top