An Angular pipe? Photo by Sharosh Rajasekher on Unsplash

Pipes are an easy way to format data for rendering purposes. When you use a pipe, you don’t have to change your data model nor make a copy of it to make it “fit” what it should look like on the screen.

For instance, using the date pipe, you can pass a specific date format to customize the way your date will be rendered:

{{ person.birthDate | date: ‘M/dd/Y’ }}

The Angular framework has 12 different pipes to date. You can find the entire list here.

Creating you own pipe

What if you need to format data in a way that is not supported by any existing pipe? Then you probably have the urge to create a formatting method in your component class that would be used as follows:

{{ getDisplayName(person) }}

Now let’s resist that urge and create a custom pipe instead.

The first step is to generate your pipe using Angular CLI:

ng generate pipe personName

This will create a pipe class with a unit test. The pipe class looks like this:

import { Pipe, PipeTransform } from ‘ @angular/core ’;

name: ‘personName’

})

export class PersonNamePipe implements PipeTransform { @Pipe ({name: ‘})export class PersonNamePipe implements PipeTransform { transform(value: any, args?: any): any {

return null;

}

}

As you can see, a pipe is a simple class with the @Pipe decorator. That decorator defines the name of the pipe, in our example the name is personName, which means our new pipe can now be used as follows:

{{ person | personName }}

Now our pipe doesn’t do anything yet. The default implementation of its transform method simply returns null. As a result, all we have to do is provide the implementation of our custom format in that method, where value is the pipe input, and the return value is the formatted string:

transform(value: any, args?: any): any {

return `${value.firstName} ${value.lastName}`;

}

In case you’re not familiar with ES6 template expressions, the above code is equivalent to this:

transform(value: any, args?: any): any {

return value.firstName + “ “ + value.lastName;

}

And voila! Our pipe is now ready to be used in any component of our application, since Angular CLI automatically added it to the declarations array of our AppModule.

In order to make that pipe even more useful, we could add some features to it. For instance, we could make it return “Mr. John Doe” or “Mrs. Jane Doe” based on the gender of the person passed as a parameter:

transform(value: any, args?: any): any {

let prefix = (value.gender === “Male”) ? “Mr.” : “Mrs.”;

return `${prefix} ${value.firstName} ${value.lastName}`;

}

We can also define parameters to customize the pipe’s behavior. Let’s make the gender prefix optional simply by adding a parameter that would be true if we want the prefix displayed, false otherwise:

transform(value: any, displayPrefix: boolean = true): any {

let prefix = “”;

if (displayPrefix)

prefix = (value.gender === “Male”) ? “Mr. “ : “Mrs. “;

return `${prefix}${value.firstName} ${value.lastName}`;

}

Note the default value of true for displayPrefix if no parameter is passed to our pipe.

The above pipe can now be used as follows if we don’t want to have any prefix:

{{ person | personName: false }}

Now you now how to create a custom pipe and how to use it in your code. Easy enough, right?