Angular 2 pipes in depth; with list of inbuilt pipes and examples

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. The order of execution is from left to right. 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.


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

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Quintin

    Hi there – have you ever had an issue where a null value on a formatted pipe caused the binding to break completely? How would you handle a value that is null (because the value comes from a web service)? I have tried using *ngIf to hide the element but the binding still occurs

    • Paul Shan

      Can you share a snippet in jsfiddle or somewhere?

  • Can you point me to information about the flow of data from component -> component calls service -> pipe used in html to pass data to nested component -> nested component? I too am having an issue with undefined data. While debugging I discovered that the pipe is not being called in the order that I was expecting. The subcomponent code is executing before the data is available and the pipe code has not executed.

    • Paul Shan

      Hey Adam. Didn’t understand your issue properly. Probably you can share some code in a fiddle. But I think if you are getting undefined in a pipe flow, probably you are doing some asynchronous tasks in a pipe without using a Promise.