Learn TypeScript 3 by Building Web Applications

Pipes

With Angular pipes, an perform display-time transformation. Pipes are invoked through the pipe operator, |, which should look familiar if you are used to Unix or Windows shells.

Pipes are useful for simple transformations such as date formatting, translations, filtering, and case changes.

Using them is rather intuitive:

{{ 'hello' | uppercase }} 
<br> 
{{ 'HELLO' | lowercase }} 
<br> 
{{ 1234.56 | currency:"EUR" }} 
<br> 
{{ '2018-08-13' | date:'E yy-MM-d' }} 
<br> 
{{ 1337000000.420545 | number: '1.1-2' }} 
<br> 
{{ 0.421 | percent }} 
<br> 
{{ [9,8,7,6,5,4] | slice:0:3 }} 

Here is the corresponding output:

HELLO 
hello 
€1,234.56 
Mon 18-08-13 
1,337,000,000.42 
42% 
9,8,7 

These are just some of the built-in pipes that Angular provides. You can find ...