How to Create Custom Pipes in Angular 2

In Angular, we can write our own custom pipes to transform the input data as per our desired output. If you want to learn first about pipes, then you can check the journal entry “Understanding Angular Pipes”.

In this journal entry, we will be focusing on creating a custom pipe as per our requirements.

Below is the sample code, basic definition or the structure of creating a custom pipe.

Points to remember while defining your custom pipe in Angular:

• The Pipe is a class that contains “pipe” metadata.
• The Pipe class contains method “transform”, which is implemented from “PipeTransform” interface. This method accepts the value and optionally accepts the arguments and converts it to the required format.
• We can add the required argument to the “transform” method.
• The @pipe decorator is used to declare Pipe and it is defined in core Angular library, so we need to import this library. This decorator allows us to define the name of Pipe, which is used in HTML markup.
• The “transform” method can return any type of value. If our Pipe’s return type is decided on run time, we can use “any,” otherwise, we can define specific types like number or string.

The PipeTransform interface

The transform method is essential to a pipe. The PipeTransform interface defines that method and guides both tooling and the compiler. Technically, it’s optional; Angular looks for and executes the transform method regardless.

EXAMPLE

Bold pipe example:

In the below-specified example, we have created a custom pipe which converts the text value to bold and returns that text as an output.