Step by Step creating Custom Pipe in Angular

Angular pipes take data as input and transform it to your desired output. For example, using interpolation you are displaying name of the product. Now you want the product name always displayed in the uppercase. You can do this using Angular pipe uppercase.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
}

In above component, productName will be displayed in uppercase. Therefore, pipe takes an input and transforms it into desired output as shown below:

Angular library provides us many built-in pipes like,

• UpperCasePipe
• LowerCasePipe
• CurrencyPipe
• PercentPipe
• DatePipe etc.

 Let us see how we could use the built-in currency pipe.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

You can also pass parameters to a pipe using the colon. You can pass input to currency pipe as shown below:

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency:'CAD':'symbol-narrow':'4.2-2'}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

Even though Angular provides many default pipes, there could be requirements when you create custom pipes. Creating a custom pipe is very as simple as creating a function.  Let us say that we want to create a pipe, which will capitalize first letter of each words in a string.

Consider below component,

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

This component will print names as below:

Now we want to capitalize the first letter of each word in the name. To do that we need to write a custom pipe.  To create a pipe, you need to follow these steps:

1. Create a class
2. Implements PipeTransform in the class
3. Implement transform function

So, you can create a pipe to capitalize first character as shown in the listing below:

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'firstcharcateruppercase' })
export class FirstCharacterUpperCase implements PipeTransform {
    transform(value: string, args: string[]): any {
        if (!value) {
            return value;
        }
        return value.replace(/\w\S*/g, function (str) {
            return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
        });
    }
}

As you see, custom pipes are nothing but a function which takes input parameters, and returns some value. You need to write all logic of the pipe inside transform method.

To use firstcharacteruppercase pipe, first you need to declare it in the module, as shown below:

import { FirstCharacterUpperCase } from './firstcharacteruppercase.pipe'
 
@NgModule({
    declarations: [
        AppComponent, FirstCharacterUpperCase
    ],
 

Next on the component, you can use it like below:

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name | firstcharcateruppercase}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

Now you will get in output the first character of each name in the uppercase.

To summarize:

1. Custom pipes are class, which is decorated with @Pipe
2. Name property of @Pipe decorator defines name of the pipe
3. Pipe class should implement PipeTransform interface

It should implement pipe business logic inside transform method.

There are two types of pipes

1. Stateless pipes
2. Stateful pipes

What we used and created above are stateless pipes. They are pure functions, which takes an input and returns transformed values.

Stateful pipes are complex to implement and they remember state of the data they transform. Usually they create an HTTP request, store the response, and display the output. Angular inbuilt async pipe is example of stateful pipe. In further posts, we will learn to create custom stateful pipes.

 Summary

In this post, we learned about pipes in Angular. Pipes transform an input data to desired output. Angular provides many built-in pipes; however, there could be requirements to write custom pipes. There are two types of pipes: stateless pipes and stateful pipes.

Like this post?

And there you have it! If you like this post, please share it. In addition, if you haven’t checked out Infragistics Ignite UI for Angular Components, be sure to do so! They’ve got 30+ material based Angular components to help you code speedy web apps faster.