Angular pipe
Pipes in angular are used for transforming the data. A pipe takes an input and transforms or converts it to required output format.
Some examples or usage of pipes are
1. Convert an input string into upper case or lower case.
2. Convert an input date to a required format.
3. Accept a string input and highlight a particular search text.
4. Format a number according to currency etc.
Syntax
Angular pipe is used with below syntax.
{{ input | pipe name }}
As evident from the above syntax, a pipe syntax is composed of following parts.
1. Input: Value on which the pipe operation will be applied. An angular pipe can accept a string, date, array and integer as input.
2. Pipe Name: Given while creating a pipe using @Pipe directive. This directive is applied over the component class of the pipe.
3. Input value and pipe name are separated by pipe symbol(|) and enclosed between double curly braces.
Result or pipe output is directly written to the browser due to String interpolation.
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 custom pipes as per need.
Following are the pipes provided by angular.
1. uppercase pipe
It converts the data supplied to it in upper case. Syntax is
{{ component_variable / value | uppercase }}
Example,
<!– result will be CODIPPA –>
{{ “codippa” | uppercase }}
A variable from component typescript class can also be used as shown below.
{{ myVar | uppercase }}
where myVar is a variable defined in the component class.
2. lowercase pipe
It transforms the value supplied to it in lowercase. Syntax is
{{ component_variable / value | uppercase }}
Example, {{ myVar | uppercase }}
3. currency pipe
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.
It can also be used to format a decimal number for displaying the required number of digits before and after decimal.
Examples are
<!– 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 –>
Giving just the pipe name will add commas to the number.
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).
Example, consider the following two pipes
<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 }}
Below example will clarify the usage of date pipe
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:`
<div>Unformatted date: {{ today }}</div>
<div>Today is {{today | date }}</div>
<div> Full date: {{today | date : 'fullDate'}}</div>
<div> Medium date: {{today | date : 'medium'}}</div>
<div> Short date: {{today | date : 'short'}}</div>
<div> Date in dd/MM/yyyy format: {{today | date : 'dd/MM/yyyy'}}</div>
<div> Time in hh:mm:ss format: {{today | date : 'hh:mm:ss'}}</div>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
today = new Date(Date.now());
}
Output of the above template is
Syntax is
{{ variable / value | titlecase }}
{{ variable / value | json }}
import { Component } from '@angular/core';
@Component({
selector:'app-root',
template:`
<div>Normal object: {{ employee }}</div>
<div>Using pipe: {{ employee | json }}</div>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
employee= {
name:'emp',
id:1,
department:'java'
};
}
Output of above component’s template is
The value may be a string, an array or a collection of elements. It slices the value on the basis of indexes given to it.
Syntax is
{{ variable / value | slice : startIndex : endIndex }}
Examples would make it more clear.
If the values of start and end index are negative, then they are assumed to be starting from the right of the value, that is, -1 index is of the rightmost or last character, -2 index is of the second last character, -3 index is of the third last character or the third character from right and so on.
Parsing of the value is done from left to right or start index should be less than end index. Examples,
In this case the output of one pipe is the input to another pipe starting from left to right and the final output is a combination of results of all the pipes.
This is called Chaining of Pipes in angular. Example,
<!– result will be 12% –>