Home

Awesome

Angular ECMAScript Intl

codecov

Contains pipes to transform internationalization data using Intl.* browser APIs.

Getting started

Install the package:

npm install angular-ecmascript-intl --save

Import the pipes individually as per usage, or import the IntlModule to import all pipes at once.

By default, all pipes will use the browser default locale. If you want to override it, you can provide the INTL_LOCALES injection token:

import { NgModule } from "@angular/core";
import { INTL_LOCALES } from "angular-ecmascript-intl";

@NgModule({
  providers: [
    {
      provide: INTL_LOCALES,
      useValue: "de-DE",
    },
  ],
})
export class MyModule {}

Also, every pipe accepts the locale option.

Now you can use the pipes, see below.

Pipes

Date pipe

Use the date pipe like the following:

{{myDate | intlDate: options}}

The input date can be one of the following:

The following options are supported:

With the INTL_DATE_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Decimal pipe

Use the decimal pipe like the following:

{{1.24 | intlDecimal: options}}

The input can be one of the following:

The following options are supported:

With the INTL_DECIMAL_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Percent pipe

Use the percent pipe like the following:

{{0.24 | intlPercent: options}}

The input can be one of the following:

The following options are supported:

With the INTL_PERCENT_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Currency pipe

Use the currency pipe like the following:

{{1.24 | intlCurrency: 'USD': options}}

The input can be one of the following:

The currency code parameter is required and must be a valid ISO 4217 currency code. If you want to transform a decimal number instead, use the intlDecimal pipe.

The following additional options are supported:

With the INTL_CURRENCY_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Language pipe

Use the language pipe like the following:

{{'en-US' | intlLanguage: options}}

The input can be one of the following:

The following option is supported:

With the INTL_LANGUAGE_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Country pipe

Use the country pipe like the following:

{{'US' | intlCountry: options}}

The input can be one of the following:

Unit pipe

Use the unit pipe like the following:

{{1.2 | intlUnit: 'hour': options}}

The input can be one of the following:

The unit parameter is required, see the specification for a full list of possible values. If you want to transform a decimal number instead, use the intlDecimal pipe.

The following additional options are supported:

With the INTL_UNIT_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

List pipe

Use the list pipe like the following:

{{['my', 'items'] | intlList: options}}

The input can be one of the following:

The following options are supported:

With the INTL_LIST_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Relative Time (timeago) pipe

The relative time format will format the input date compared to the current date in a "timeago" format. Every minute, the value will be updated automatically.

Use the relative time pipe like the following:

{{myDate | intlRelativeTime: options}}

The input date can be one of the following:

The following options are supported:

With the INTL_RELATIVE_TIME_PIPE_DEFAULT_OPTIONS injection token you can specify default options.

Browser compatibility

This library supports the latest major version of the following browsers:

For each of those browsers, unit tests are being performed regularly.

In case you need to support older versions of that browsers, see the below table with the minimum required browser version for each pipe:

PipeChromeFirefoxSafari
Date242910
Number242910
Percent242910
Currency242910
Language818614.1
Country818614.1
Unit777814.1
List727814.1
Relative Time716514

Angular compatibility table

Angularangular-ecmascript-intl
184.x
173.x
162.x
151.x

Background

For more context, see the following GitHub issue