Search⌘ K
Home
Courses
Angular: Designing and Architecting Web Applications

Custom Pipes

Explore how to create custom pipes in Angular to transform data beyond built-in options. Learn to generate pipe files, implement the transform method, handle parameters for dynamic behavior, and apply your pipes in templates to format values flexibly.

We'll cover the following...

It’s time to create a custom pipe. If none of the pipes defined by Angular are suitable, then a custom pipe might be the solution you’re looking for.

Creating a pipe

The angular CLI has a command for helping us generate the necessary files and code for a pipe. In the command line, run the following command:

ng generate pipe double

The ng generate pipe <name> command will create two files in the src/app directory: double.pipe.spec.ts and double.pipe.ts. The double.pipe.spec.ts file is for testing the pipe. The double.pipe.ts file is where we’ll write the logic for the pipe.

Note: The app.module.ts file was modified. We’ll be ignoring this change. We’ll review modules in another section.

Reviewing the pipe file

Here are the contents of the double.pipe.ts ...