What are Pipes?
Pipes are a way to transform or modify the data that is shown to the user. Typically, pipes perform utility functions by using a simple syntax which would otherwise require some coding. Example, suppose you want to show the name of an employee or some object in upper case, no matter in which case you are getting it from the backend source or you want to format a large number properly with commas according to its length(such as 1,23,000). Using pipes, this can be easily done.
Syntax
Pipes are applied to the data to be transformed by using pipe symbol( | ) followed by the name of pipe. Example, if the name of pipe is uppercase
, then it will be applied as shown below
{{ “codippa” | uppercase }}
Result will be CODIPPA. Here codippa is a string. A pipe can also be applied to a variable in the component class such as
{{ myVar | uppercase }}
In this case, the text rendered will be the value stored in variable myVar in upper case.
Also, since, text is to be displayed on the web page, the data along with pipe syntax must be enclosed within double curly braces {{ and }}. This is called Interpolation.
Built in Pipes
Angular supplies different built in pipes which are sufficient for most purposes. It is also possible to create our own pipes as per customized needs. Following are the pipes provided by angular.
1. uppercase
It converts the data supplied to it in upper case. Syntax is
{{ component_variable / value | uppercase }}
Example, {{ myVar | uppercase }}
2. lowercase
It transforms the value supplied to it in lowercase. Syntax is
{{ component_variable / value | uppercase }}
Example, {{ myVar | uppercase }}
3. currency
Used to transform a number is currency format such as adding commas and adding currency symbol or notation. It has several options some of which are explained below.
<div>{{ 34562 | currency: ‘AUD’}}</div>
<!– same as above –>
<div>{{ 34562 | currency: ‘AUD’: ‘symbol’}}</div>
<!– display symbol in short format –>
<div>{{ 34562 | currency: ‘AUD’: ‘symbol-narrow’}}</div>
<!– display 6 digits before decimal and 2 digits after decimal –>
Note that the input to the pipe can also come from a variable declared in the component class.
For complete list of currency codes, refer this link.
<!– display formatted decimal, output will be 1,234.562 –>
<!– display 2 digits before decimal and max 2 digits after it, output will be 34.56 –>
<!– display 2 digits before decimal and 1 digit after it, output will be 34.6 –>
A decimal number can be formatted to display the required number of digits both before and after the decimal.
Syntax to format a decimal is :
{{value | number:'[number of digits before decimal].[min number of digits after decimal] – [max number of digits after decimal] }}
Default value for digits before decimal is 1, for minimum digits after decimal is 0 and for maximum digits after decimal is 3.
<div>{{ 34.562 | number: ‘2.3-2’ }}</div>
Error: The minimum number of digits after fraction (3) is higher than the maximum (2).
<div>{{ 34.562 | number: ‘2.1-2’ }}</div>
<div>{{ 34.567 | number: ‘2.1-2’ }}</div>
{{ value | percent }}
{{value | percent :'[number of digits before decimal].[min number of digits after decimal] – [max number of digits after decimal] }}
<div>{{ .34 | percent }}</div>
<!– display formatted decimal, output will be 34.562% –>
<!– display 2 digits before decimal and max 2 digits after it, , output will be 34.56%–>
<!– display 2 digits before decimal and 1 digit after it, , output will be 34.6%–>
- date, month name in alphabets, year.
- date, month and year in various numeric formats such as dd/MM/yyyy or dd-MM-yy or yyyy/MM/dd etc.
- date, month and year along with time in different formats.
- Only time without date and many more.
{{ variable / value | date }}
Output of the above template is
{{ variable / value | titlecase }}
{{ variable / value | json }}
Output of above component’s template is
{{ variable / value | slice : startIndex : endIndex }}