What is a Angular Pipe

Go back to Tutorial

Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.

Once data arrive, you could push their raw toString values directly to the view, but that rarely makes for a good user experience. For example, in most use cases, users prefer to see a date in a simple format like April 15, 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time).

Clearly, some values benefit from a bit of editing. You may notice that you desire many of the same transformations repeatedly, both within and across many applications. You can almost think of them as styles. In fact, you might like to apply them in your HTML templates as you do styles.

Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML. Pipe is a decorator and has options as

Option	Description
name	The pipe name to use in template bindings.
pure	When true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.

Example

If we need the data transformed generally we would implement it in our model, for example we have a number 1234.56 and want to display it as a currency such as $1,234.56.

We could convert the number into a string and store that string in the model but if the only place we want to show that number is in a view we can use a pipe instead.

We use a pipe with the | syntax in the template, the | character is called the pipe character, like so:

{{ 1234.56 | }}

{{ 1234.56 | currency : ‘USD’ }}

This would take the number 1234.56 and convert it into a currency string for display in the template like USD1,234.56.

We can even chain pipes together like so:

{{ 1234.56 | currency: ‘USD’ | lowercase }}

The above would print out usd1,234.56.

 

Go back to Tutorial