How to make a custom pipe in Angular

Angular framework has lot of cool concepts which provides great solutions to our day to day front end development tasks.

Pipes are also that type of solution (concept) which is provided y Angular framework. Here is the exact definition of Angular Pipe.

Angular Pipe : Definition

👇 Here is the official definition👇
Pipes are simple functions you can use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once. For example, you would use a pipe to show a date as April 15, 1988 rather than the raw string format. [Read more about pipes]

There are in-built Angular pipes which we can use directly in our projects. Here is the list of in-built Angular pipes :

• DatePipe: Formats a date value according to locale rules.
• UpperCasePipe: Transforms text to all upper case.
• LowerCasePipe: Transforms text to all lower case.
• CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.In this article we are going to take a look how

Custom Angular Pipe

Now let’s take a look how to create our own angular pipe. We called these pipes as ‘Custom Angular Pipes’ 😉

There are 2 methods to create a custom pipe in Angular.

1. Using ng generate pipe angular cli command.
2. Manually.

In this article I’ll use manuall process to create a pipe. (This is to give a good undestand aout Angular pipes. Otherwise just use ng generate pipe <custom-pipe-name> 😉

Creating a custom pipe — Step by step

Here are the main steps you have to follow to create a custom Angular pipe. In this example I will create a custom pipe called welcome.pipe.ts which return a greeting (string).

1. Create a file called welcome.pipe.ts
2. Then import Pipe & PipeTransform from @angular/core
3. Use The Pipe decorator (@Pipe) to define the pipe name that will be used within the components. I have given pipe name as welcome.
4. The custom pipe class should implement PipeTransform interface.
5. And then implement PipeTransform’s transform method which accepts an input value followed by optional pipe parameters and returns the transformed value.
6. Add the reference to custom pipe in app.module.ts file.
7. Add the custom pipe class name to the declaration array of app.module.ts.
8. Finally use the custom pipe in components by using the name given in Pipe decorator. i.e., “welcome”.

Custom Pipe not found Error NG8004: No pipe found with name

The most common error you will get while creating custom pipes is No Pipe found with name.

When we create a custom pipe, we must include our pipe in the declarations array of the AppModule.

But if you use angular cli to create a pipe mostly you will not get this error as ng generate pipe will automatically add reference in declaration array of app.module.ts file