Angular Pipes
Jun 21st, 2019 - written by Kimserey with .
In Angular, Pipes are used to specify operations directly on the HTML template, operating directly on the value prior being embedded to the template. The major benefit of pipes is their simplicity, using them we are able to remove abstract out logic which we would otherwise reside in the component. In a previous post, we discussed the AsyncPipe used to subscribe to observables. Today we will see the rest of the pipes available in Angular and how they can be used:
- Formatting Pipes
CurrencyPipeDatePipeDecimalPipePercentPipeJsonPipeSlicePipe
- Operation Pipes
JsonPipeKeyValuePipeSlicePipe
- Internationalization Pipes
I18nPluralPipeI18nSelectPipe
Formatting Pipes
Pipes are used directly on the template using the pipe operator |. In order to use the CurrencyPipe, we pipe an amount directly into the binding ``. Each pipe has a set of configurations that can be specified using :. For instance the CurrencyPipe has the following definition:
1
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
Each paramter is optional, but needs to be specified in order if modification is required.
CurrencyCodeis the ISO 4217 currency code,Displaydefines the display of the currency code,DigitsInfodefines the number of digits to display with the format{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits},Localedefines the local of the app.
CurrencyPipe
CurrencyPipe can be used to transform a number into a monetary value tied with a currency. It is particularly useful as it handle by default the currency signs and the placement of the currency signs when the amount is negative.
1
2
3
4
5
6
<div>
{{ amount | currency : 'CAD' }}
<!-- -CA$123.11 -->
{{ negativeAmount | currency : 'EUR' : 'symbol' : '1.3-10' }}
<!-- €123.10545 -->
</div>
DatePipe
DatePipe can be used to format a date. With a date in our component,
1
today: Date = new Date();
we can display the date in a human readable format and specifying a timezone.
1
2
3
4
<div>
{{ today | date : 'full' : '+0800' }}
<!-- Friday, June 14, 2019 at 3:54:51 PM GMT+08:00 -->
</div>
The pre-defined format are available in Angular documentation of the DatePipe.
DecimalPipe
DecimalPipe can be used to format a number in the same way as the currency following the digitsInfo format {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
1
2
3
4
5
<div>
{{ amount | decimal : '1.2-5' }}
<!-- 123.12345 -->
<!-- 1.00 -->
</div>
PercentPipe
PercentagePipe turns a fraction into a percentage number
1
percentage: number = 0.15345;
and can have its format set by digitsInfo as well.
1
2
3
4
<div>
{{ percentage | percent : '1.2-5' }}
<!-- 15.345% -->
</div>
Operation Pipes
Angular also comes with pipes operating on the value.
1
2
3
4
value: any = {
one: 'Hello',
two: 'Bye'
};
JsonPipe
JsonPipe will display a json formatted version of objects provided, extremely useful for debugging purposes.
1
2
3
4
5
6
7
8
9
10
<pre>
{{ value | json }}
</pre>
<!--
{
"one": "Hello",
"two": "Bye"
}
-->
KeyValuePipe
KeyValuePipe will transform an object into an iterable array of tuple key/item which is extremely useful when dealing with maps.
1
2
3
4
5
6
7
8
9
10
<ul>
<li *ngFor="let item of value | keyvalue">
{{item.key}}: {{item.value}}
</li>
</ul>
<!--
- one: Hello
- two: Bye
-->
SlicePipe
SlicePipe will slice a part of an array.
1
2
3
4
5
6
7
8
9
<ul>
<li *ngFor="let item of value | keyvalue | slice : 1">
{{item.key}}: {{item.value}}
</li>
</ul>
<!--
- two: Bye
-->
Keyvalue | slice : 1 pipes the output of KeyValuePipe, an array of pair, to SlicePipe which then slices starting from 1 and therefore returns only the second pair.
Internationalization Pipes
Lastly, the internationalization pipes are useful to deal with text changes due to context.
I18nPluralPipe
Pluralization being a common problem, Angular ships with I18nPluralPipe.
1
{{ value_expression | i18nPlural : pluralMap [ : locale ] }}
It takes a pluralMap which can be used to identify with text format to use depending on the context.
1
2
3
4
5
6
7
pluralMap: any = {
'=0': 'Nothing',
'=1': 'We have one',
'other': 'We have a few'
};
value: number = 10;
=0, =1, etc… mimics the ICU format, with =n for any matches on a specific number and other for catch all.
We can then pipe the number to the i18nPlural pipe providing the pluralMap.
1
2
{{ value | i18nPlural : pluralMap }}
<!-- We have a few -->
I18nSelectPipe
Another important part of internationalization is word gender. To deal with that, Angular ships with I18nSelectPipe, which instead of providing a number mapping, we provide a concrete text value.
1
2
3
4
5
6
selectMap: any = {
'male': 'He',
'female': 'She'
}
gender: string = 'female';
We can then pipe the gender into the i18nSelect pipe.
1
2
{{ gender | i18nSelect : selectMap }}
<!-- She -->
Conclusion
Today we explored the different default pipes provided by Angular. From pipes displaying currencies, to dates, passing by pipes operating on an object provided and completing by looking into pipes used for internationalization. We seen different scenarios where they can be applied, and how they help in lifting some logic that would otherwise sit in the component. I hope you liked this post and I see you on the next one!