Tutorial

Create a Globally Available Custom Pipe in Angular 2

Draft updated on Invalid Date
Default avatar

By Jecelyn Yeen

Create a Globally Available Custom Pipe in Angular 2

This tutorial is out of date and no longer maintained.

Introduction

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 plnkr.

Default Pipe

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’s 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 the 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.

Conclusion

Yay! View Angular 2 - Pipes (final) scotch on plnkr.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Jecelyn Yeen

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel