Angular : Pipes

A  guide to Angular's Pipes

So what exactly are pipes?

There's not much of a difference when we use the real world example of pipes to understand the angular's pipes. Well here's a sentence denoting real world pipe : He heard a tune being piped. Pretty straight forward huh? A person blows air (data) into a  flute and controls (transforms) the music that comes out.

Well Angular's Pipes are no different, you give some input data  and then transform the outcome of the same data but in a different format. 

A deep dive into Angular Pipes 

From the official Docs Pipes are : Pipes transform displayed values within a template.

Pipes are a feature of Angular 2 that allows you to contextually manipulate and format text on the front end. From simple date formatting, to a complete transformation, pipes allow you to separate how you display data provided from the backend.

 Usage can be as belows : 

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

Following are the in-built pipes provided by Angular.

Pipe Name	Angular
currency	✓
date	✓
uppercase	✓
json	✓
limitTo	✓
lowercase	✓
number
orderBy
filter
async	✓
decimal	✓
percent	✓

General syntax 

{{today | date }}

Pipe with Params 

The pipe date is also a predefined date. The date format string we provided after colon is a parameter for the pipe date. Syntax {{today | date:"dd/MM/yyyy"}}

Code : 

Date Pipe
Ouput : 
1. Today is Wed May 24 2017 11:00:33 GMT+0530 (IST)

2. Today is May 24, 2017

3. Today is 24/05/2017

Decimal Pipe

Output : 
pi (no formatting): 3.1415927
pi (.5-5): 3.14159
pi (2.10-10): 03.1415927000
pi (.3-3): 3.142

Currency Pipe
Output : 
A in USD: $0.12


B in INR: INR0,001.10

Upper Case Lower Case Pipe
Output : 
In lowerCase : my name is paul shan


In uppercase : MY NAME IS PAUL SHAN

JSON Pipe
Output : 
Without JSON Pipe.

[object Object]
With JSON Pipe.


{ "name": { "fName": "Paul", "lName": "Shan" }, "site": "VoidCanvas", "luckyNumbers": [ 7, 13, 69 ] }

Percent Pipe
Output : 
myNum : 14.159%


myNum (3.2-2) : 014.16%

Slice Pipe
Output : 
voidcanvas.com (0:4): My n

names (1:4)

david
ean

renee

Async Pipe
Ouput : 
wait...
Click me to initiate promise



wait... resolved


Click me to initiate promise

Custom Pipes

Though there are few predefined pipes available, but custom pipes are very much necessary; even that’s why the pipes exist.

You might have noticed Pipes is not a feature.You 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.
Code :

Creating a custom pipe
Consuming the created custom 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.

Pure Vs Impure Pipes

Pure pipes execute only on value change whereas impure pipes execute repeatedly on a user based scenario instead of value change. By default all Pipes provided by Angular as Pure Pipe. To make a custom pipe impure we simply set its metadata attribute to true Syntax @Pipe({name: 'custom', pure: false}).