Creating Custom Pipes in Angular

Previously known as Filters in AngularJS, Custom Pipes can be of two types. Pure and impure custom pipe. Pipe takes an input and returns an output based on the output of transform function evaluation.

Angular has many built-in pipes. In this article, we’ll see how to create a custom one.

Steps Involved In Creating a Custom Pipe In Angular are:
1) Create a Pipe Class and decorate it with the decorator @Pipe.
2) Supply a name property to be used as template code name.
3) Register your Pipe in the module under declarations.
4) Finally, implement PipeTransform and write transformation logic.
5) Use your pipe in the HTML using ‘|’, which represents a pipe.
6) Also, add Custom arguments if you want to.

https://gist.github.com/NishuGoel/a772bdf319b1eb19a551e8c3dfafd11f

Once we are done creating the Pipe class, we go to app.module.ts and register our pipe.Once we are done creating the Pipe class, we go to app.module.ts and register our pipe.

 

https://gist.github.com/NishuGoel/aaa2edff8956e57eaf6aa68667c19044

To finally put some logic behind the task of our custom pipe, we use PipeTransform.

https://gist.github.com/NishuGoel/0036f43a5a2f475e8a317aead22f2aac

So, to maintain the required contract to adhere to the standard structure, we use transform() method inside PipeTransform.

Now, our motive is to convert some random number to a readable format of megabytes, and to do that, we put logic inside transform() as follows:

 

 

https://gist.github.com/NishuGoel/e11e16baec4426e10d2e9d344a62476a