Angular Pipes

Angular pipes are mechanisms that can be used to take data and transform it into another forms.

Let’s look at an example:

Given a variable with a date in our component (2010/01/15) (take care that months are 0 based and days are 1 based):

myDate = new Date(2010, 0, 15)

If we print this in our page, it will look hard to read:

<p>
  My date: {{ myDate }}
</p>

The output:

My date: Fri Jan 15 2010 00:00:00 GMT-0200 (Uruguay Time)

But we can use pipes and the date function to transform that data into something more readable:

<p>
  My date: {{ myDate | date }}
</p>

The output:

My date: Jan 15, 2010

As we can see, it formatted in the default way, but we can also add parameters to the date function to change the way it transforms the data, for example:

<p>
  My date: {{ myDate | date: 'yyyy/MM/dd' }}
</p>

The output:

My date: 2010/01/15

Other functions that can be used with pipes:

Text:
Transform text into lowercase:
{{ textvar | lowercase }}

Transform text into uppercase:
{{ textvar | uppercase }}

Capitalize only the first letter of each word:
{{ textvar | titlecase }}

---

Numbers:
Define how many numbers to the left and right of the decimal point (in this case, 5 numbers to the left and from 2 to 4 to the right):
{{ numbervar | number: '5.2-4' }}

Format a number as currency (by default as USD):
{{ numbervar | currency }}
As Yen:
{{ numbervar | currency: 'JPY' }}
As Pounds:
{{ numbervar | currency: 'GBP' }}
As Euros:
{{ numbervar | currency: 'EUR' }}

Given a numbervar with the value 0.25, transform it into percentage (25%):
{{ numbervar | percent }}

---

Arrays:
Slice the elements on an array (in this example, it will take only from the first to the fourth element, as the element of index 5 is not included in the slice):
<custom-component *ngFor="let item of items | slice: 0:5; index as i" (itemSelected)="onItemSelected($event)" [item]="item" [itemIndex]="i + 1"></custom-component>

---

Print json:
You can use this pipe to print an array that have a JavaScript Object as json, very useful when debugging an application:
{{ arrayvar | json }}

Key value pipe:
Considering a given JavaScript Object, you can print its keys and values with the following:
<div *ngFor="let pair of jsobjectvar | keyvalue">
  {{ pair.key }} = {{ pair.value }}
</div>