Angular 2.0 is still beta (I’m using beta.1 here). If you find any difficulties to implement those what’s written in the article (though I will try to keep the article updated always), please post a comment about that.

In the series of our AngularJs 2.0 tutorials, today is the time for pipes. Pipes are the modernized version of filters in Angular 1.X. Something like using function in your templates; or something like helpers to modify, choose, format your value within the template.

Usage of pipes

  • You can display only some filtered elements from an array.
  • You can modify or format the value.
  • You can use them as a function.
  • You can do all of the above combined.

Why pipes?

Pipes don’t give you any new feature. In angular 2 you can use logics in templates too. You also can execute a function in the template to get its returned value. But pipes is a handsome way to handle these things in templates. It makes your code more clean and structured.

General syntax

The pipe expression starts with the value followed by the symbol pipe (|), than the pipe name. The params for that particular pipe can be sent separated by colon (:) symbol. However the pipe operator only works in your templates and not in JavaScript code. In JavaScript the pipe symbol works as bitwise operator.

Example repo

My github repo contains all kind of examples of Angular 2.0. Pipe specific examples can be found here. You can download or clone the entire repo and using modules like *serve*, *live-server* or any other hosting tools, you can host and view the live examples.

Describing with examples

Examples are always best things to understand anything about programming. Below are three different examples of pipes and their descriptions.

Most simple pipe

Output >> paul shan
lowercase is a predefined pipe. In the given example, the string “Paul Shan” is passed as a value to the pipe lowercase, and the output paul shan is returned.

Pipe with param

The pipe date is also a predefined date. The date format string we provided after colon is a parameter for the pipe date.

Create a custom pipe

Though there are few predefined pipes available, but custom pipes are very much necessary; even that’s why the pipes exist. Below is an example of creating and using a custom pipe.

designing the pipe

using the pipe


Pipe classes has three hooks.

  • constructor(arguments)
  • transform(value, arguments)
  • onDestroy()

constructor() is the normal constructor of the class, example of transform() is already given above. onDestroy() is called once the pipe is going to be destroyed. You can find an example of this later on in this article.

All predefined pipes

There are many predefined or inbuilt pipes available in Angular 2.0. You can find them below with examples.


This pipe is used to display the date in a particular format. There are multiple predefined formats available; like, “medium”, “short”, “fullDate” etc. You also can use your own custom format string using “y” as year, “M” as month, “d” as date, “h” as hour, “m” as minute, “s” as second and many more. For a brief you can check angular’s official document on date pipe


This pipe is used to formal a number. You can set a min and max length after the decimal point and a fixed number (or leave it blank for default) for the places before the decimal point.


This pipe helps you to format and using the symbols as ISO 4217 currency code, such as “USD” for the US dollar and “EUR” for the euro. The second parameter it takes is symbolDisplay whose default value is false. The third parameter is digitInfo which works as DecimalPipe.

LowerCasePipe & UpperCasePipe

The name says it all. These two pipes just changes the cases of the characters. They don’t accept any parameters.


With JSON Pipe


export class JSONPipe {
obj: Object = { name: {fName: “Paul”, lName:”Shan”}, site:”VoidCanvas”, luckyNumbers:[7,13,69] };

Normally with the help of double curly brace operator ({{}}) you can print a value but not an entire object. You end up printing [object object]. To print the JSON object properly you can use JSONPipe.


It converts the number in percentage and also adds the percentage symbol (%) after it.


Slice pipe is a pipe which works just like JavaScript’s Array.prototype.slice().

Async pipe

This is one of the very interesting pipes. It works as an observer to a promise. If the promise is resolved.

Pure and Impure pipes

Pipe also accepts a metadata called pure. The listed predefined pipes above are all pure pipes (the pure property is set to true). If a pipe is pure, it will re-execute only the value of the input or the passed parameter are changed. But if you want to re-run a pipe independently of the scenario I just said, you can make your pipe impure by setting the property pure to false.

This code is another use of custom pipes. A custom pipe countdown is created, setting the pure property to false. It has a timer inside it which runs in every 50 milliseconds and changes the value of a certain property of the pipe.

Pipe vs filter

Angular 1.X had a concept of filters. Pipes are very much similar to that but it has some significant advantages, the pipes.

Filters used to act like helpers, very similar to functions where you pass the input and other parameters and it returns you the value; but pipe works as a operator. The concept is, you have an input and you can modify the input applying multiple pipes in it. This not only simplifies the nested pipe logic, but also gave you a beautiful and clean syntax for your templates. Secondly, in case of async operations, you need to set things manually in case of angular 1.X filters. But pipes are smart enough to handle async operations