Angular Custom Pipes example

Angular provides built-in pipes like date, uppercase, etc to format/transform values. Angular also allows us to create custom pipes for situations where we cannot use the built-in pipes. Custom pipes are created using the @Pipe decorator. Pipes are classes which implement PipeTransform and use the transform() method to provide the transformation logic. The trasform() method takes the input value and pipe parameter values as its arguments.

We can use the ng generate pipe command to create custom pipes. In the following example we will create a simple squareNumber pipe which will take the input value and return the square value of the number. Let us start by create a new custom pipe using the following command.

Angular Custom Pipes

In the previous posts we saw about the built-in pipes in Angular, their syntax, usage, chaining etc. Angular also provides us the ability to create our own custom pipes to suite our requirement. When we cannot use any of the built-in pipes for our requirement we can create a custom pipe. Also for larger applications, create custom pipes helps in reusing code/functionality.

Custom pipes are nothing but classes like Components and custom Directives, Custom pipe classes use the @Pipe decorator. The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value.

While creating the custom pipe class, use the @Pipe decorator and specify the name of the custom pipe as follows.