Angular Custom Pipes | Performance Optimization
Custom Pipes in Angular — The Ultimate Guide
How to create custom pipes in Angular, what are pure and impure pipes, and how to use pure pipes to improve an application’s performance.
Published in
7 min readAug 17, 2022
Pipes in Angular are functions used in component template expressions to transform values into another display format. Angular has several built-in pipes, such as the date pipe, the async pipe, and others. But, if these pipes don’t cover our needs, we can create our own.
In this article, we’re going to study:
- how to create custom pipes in Angular (manually/using Angular CLI)
- how to use pipes and pass extra arguments
- what pure and impure pipes are
- how to improve performance with pure pipes and memoization
So, let’s get started!
Creating Custom Pipes in Angular
To create a custom pipe we need to follow 3 simple steps:
1. Create a class and decorate it with the @Pipe decorator. The decorator must include the name we are going to use to call the pipe.
