Create a Globally Available Custom Pipe in Angular 2

Create a Globally Available Custom Pipe in Angular 2

  • 2016-07-19
  • 1402

In this tutorial, we will learn about what is pipe, how to build a custom pipe, how to make the pipe available application wide. Live example here in plunkr.

Introduction

Angular 2 comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. They are all immediately available for use in any template.

For example, utilize the uppercase pipe to display a person name in capital letter.

import { Component } from [email protected]/core';

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | uppercase }}</strong>.</p>',
})
export class AppComponent {
  name = 'john doe';
}

The output of the example above is My name is JOHN DOE.

Custom Pipe

Now if you would like to capitalize the first letter of each word, you can create a custom pipe to do so.

import { Pipe, PipeTransform } from [email protected]/core';

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
    if (!value) return value;

    return value.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
}

To use this pipe, import it into our component and inject it into the component’s decorator, like this:-

import { Component } from [email protected]/core';
import { CapitalizePipe } from './capitalize.pipe'; // import pipe here

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>',
  pipes: [CapitalizePipe] // inject here
})
export class AppComponent {
  name = 'john doe';
}

The output of the example above is My name is John Doe.

Application-wide pipe

Now imagine that you have a pipe that you will use in almost all of your components (e.g. a translate pipe), you will need to import the pipe to each of your compoenent and inject it. What if you have 100 components? It’s tedious and repetitive. How can we make it globally available just like the built-in pipes?

There’s a way to do it. We can inject the pipe during the bootstrapping of our application.

import { bootstrap }    from [email protected]/platform-browser-dynamic';
import { provide, PLATFORM_PIPES } from [email protected]/core';

import { AppComponent } from './app.component';
import { CapitalizePipe } from './capitalize.pipe';

bootstrap(AppComponent, [
  provide(PLATFORM_PIPES, {
            useValue: [
                CapitalizePipe
            ],
            multi: true
        })
]);

PLATFORM_PIPES is a token that provided by Angular to make pipes available in every component of the application. Refer to Angular documentation.

Now, we can remove the pipe injection in our component.

import { Component } from [email protected]/core';
// no more import pipe

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>',
  // no more inject
})
export class AppComponent {
  name = 'john doe';
}

Yay! Live example here in plunkr.