Custom Pipes in Angular
Join the DZone community and get the full member experience.Join For Free
A pipe takes in data as input and transforms it to a desired output.
There are various built-in pipes, such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe, etc.
See the below example of using built-in pipes in application
Parameterizing a pipe:
A pipe can accept any number of optional parameters to format the input.
Chaining of pipes:
We can chain multiple pipes together.
Now, we will see how we can write our first custom pipe
We are expecting a square of a number which we are giving as input to a pipe. Very simple scenario, right? Here’s the code that would go into a square-num.pipe.ts file inside of your app folder:
Then, we will include the custom pipe as a declaration in app.module.ts.
Finally, we can use pipe into our HTML file:
Do not forget to share the points of improvement in the comments below. Happy learning!
Opinions expressed by DZone contributors are their own.