Custom Pipes

We'll learn how to create custom pipes in this lesson.

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 file:

Get hands-on with 1200+ tech skills courses.