💉 Shot #5: How to create custom Pipe in Angular

Introduction

We usually use predefined Angular pipes to prepare data for presentation, for example, lowercase and date pipes. But from time to time we need to create custom pipes. Let’s assume we need to create a debug pipe that will console.log all passed values.

{{ user.email | debug }}

Step 1: Create a pipe class

First of all, we need to create a pipe class and mark it as an Angular pipe.

Step 2: Implement PipeTransform

Then we have to implement PipeTransform interface — create the transform method that will receive value, log it and return.

Step 3: Add pipe to declarations

The last thing we need to do is to add MyPipe to the module declarations.

Shot

Here is the final shot, ready to use.

Useful Links

1. Angular Pipes — https://angular.io/guide/pipes