Create a Globally Available Custom Pipe in Angular 2

AngularJS global pipes help format content across your entire application.

Free Course

Getting Started with Angular 2

Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features.

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.

// app.component.ts

import { Component } from '@angular/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.

// capitalize.pipe.ts

import { Pipe, PipeTransform } from '@angular/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, let modify our app component, like this:-

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>', // change to use capitalize pipe
})
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), how can we make it globally available just like the built-in pipes?

There's a way to do it. We can include the pipe in application module of our application.

// app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, CapitalizePipe ], // include capitalize pipe here
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

Angular Module is a great way to organize the application and extend it with capabilities from external libraries. It consolidate components, directives and pipes into cohesive blocks of functionality. Refer to Angular documentation.

Now, we can run our application and check the page result.

Yay! Live example here in plunkr.

Jecelyn Yeen

Coder. Diver. Board Game Lover.

Speak English, Mandarin, JavaScript, Typescript, C# and more.

Problem solver at @iflix.