Looking for a specific post? Checkout the Blog Index.

By Kimserey Lam with

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

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.

  • CurrencyCode is the ISO 4217 currency code,
  • Display defines the display of the currency code,
  • DigitsInfo defines the number of digits to display with the format {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits},
  • Locale defines 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!

External Sources

Designed, built and maintained by Kimserey Lam.