logo

Pipes overview

Pipes overview

Pipes represent simple functions that we can use inside a template to display the transformed data. They can be used to format numbers, dates, currencies etc.

Angular provides a set of built-in pipes with CommonModule - in this part we will look at the most commonly used ones.

Text transformation

Let's start with the simplest ones - lowercase, uppercase and titlecase pipes. All of them are used for text transformation, respectively:

  • lowercase - transforms string to all lower case,
  • uppercase - transforms string to all to upper case,
  • titlecase - capitalize first letter of each word and transforms rest to lower case.
<p>{{'hEllo worLD' | uppercase}}</p>
<!-- output: HELLO WORLD -->

<p>{{'hEllo worLD' | lowercase}}</p>
<!-- output: hello world -->

<p>{{'hEllo worLD' | titlecase}}</p>
<!-- output: Hello World -->

Numbers transformation

DecimalPipe

DecimalPipe modifies data as specified by digit parameter. It takes two arguments:

  • digit info - specifies the number of decimal places, the decimal separator, and the grouping separator like this: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  • locale - formats data according to locale-specific configurations.

Those two parameters are shared among the various pipes. However, they may have different default values.

<p>{{ 2.25 | number}}</p>
<!-- output: 2.25 -->
<p>{{ 2.25 | number:'4.3-4'}}</p>
<!-- output: 0,002.250 -->
<p>{{ 2.253233 | number:'4.3-4'}}</p>
<!-- output: 0,002.2532 -->
<p>{{ 2.25 | number:'4.1-2':'fr'}}</p>
<!-- output: 0 002,25 -->

PercentPipe

PercentPipe formats numbers as percentages. It simply multiplies the input value by 100 and appends the percentage symbol.

<p>{{0.25 | percent}}</p>
<!-- output: 25% -->

<p>{{0.25 | percent: '3.1-3'}}</p>
<!-- output: 025.0% -->

<p>{{0.25 | percent: '1.2-2':'fr'}}</p>
<!-- output: 25.00 % -->

CurrencyPipe

CurrencyPipe adds to given number currency symbol. Due to the multiplicity of currencies it's a slightly more complicated case than others.

The following are taken as input parameters:

  • currency code - ISO 4217 currency code,
  • format - format of currency indicator,
  • and similarly to the other digit info and locale.

Use cases for the different parameters can be found below:

<p>{{10 | currency }}</p>
<!-- output: $10.00 -->

<p>{{10 | currency: 'EUR' }}</p>
<!-- output: €10.00 -->
<p>{{100 | currency: 'CAD':'code' }}</p>
<!-- output: CAD100.00 -->

<p>{{100 | currency: 'CAD':'symbol' }}</p>
<!-- output: CA$100.00 -->

<p>{{100 | currency: 'CAD':'symbol-narrow' }}</p>
<!-- output: $100.00 -->
<p>{{1.2 | currency: 'EUR':'symbol':'2.3-4'}}</p>
<!-- output: €01.200 -->

<p>{{1.25237 | currency: 'EUR':'symbol':'3.3-4'}}</p>
<!-- output: €001.2524 -->
<p>{{100 | currency: 'PLN':'symbol':'1.2-2':'en' }}</p>
<!-- output: PLN100.00 -->

<p>{{100 | currency: 'PLN':'symbol':'1.2-2':'pl' }}</p>
<!-- output: 100,00 zł -->

To override default currency symbol ($) we need to provide it in app.module.ts:

providers: [ { provide: DEFAULT_CURRENCY_CODE, useValue: 'PLN' } ]

Date formatting

DatePipe provides consistent and localized formatting for date values inside template.

As input parameters we can specify:

  • date format
  • timezone
  • locale
date: new Date("2020-07-17T08:15:24");
<p>{{date | date}}</p>
<!-- output: Jul 17, 2020 -->
<p>{{date | date:'dd-MM-YYYY HH:mm:ss'}}</p>
<!-- output: 17-07-2020 08:15:24 -->
<p>{{date | date:'short':'GMT'}}</p>
<!-- output: 7/17/20, 6:15 AM -->
<p>{{date | date:'short':'GMT':'pl'}}</p>
<!-- output: 17.07.2020, 06:15 -->

Asynchronous operations

AsyncPipe simplifies management of asynchronous data streams. It is commonly used to subscribe to Observable (or Promise) and automatically update the template when the data changes.

import {interval} from "rxjs";

observable = interval(1000);
<div>{{ observable | async }}</div>
<!-- output: 0, 1, 2, 3... changed every 1s -->

Conclusion

Pipes are a useful feature that allow developers to transform data in a view template. The above are the most commonly used built-in pipes from CommonModule. The remaining pipes will be presented in the next article.