Awesome
Angular ECMAScript Intl
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
- Decimal pipe
- Percent pipe
- Currency pipe
- Language pipe
- Country pipe
- Unit pipe
- List pipe
- Relative Time (timeago) pipe
Date pipe
Use the date pipe like the following:
{{myDate | intlDate: options}}
The input date can be one of the following:
Date
object- number (UNIX timestamp)
- string (will be parsed by
new Date()
constructor) - null
- undefined
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:
- number
- string (must be parseable as number)
- null
- undefined
The following options are supported:
notation
signDisplay
minimumIntegerDigits
minimumFractionDigits
maximumFractionDigits
minimumSignificantDigits
maximumSignificantDigits
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:
- number
- string (must be parseable as number)
- null
- undefined
The following options are supported:
notation
signDisplay
minimumIntegerDigits
minimumFractionDigits
maximumFractionDigits
minimumSignificantDigits
maximumSignificantDigits
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:
- number
- string (must be parseable as number)
- null
- undefined
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:
currencyDisplay
currencySign
notation
signDisplay
minimumIntegerDigits
minimumFractionDigits
maximumFractionDigits
minimumSignificantDigits
maximumSignificantDigits
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:
- string (must be a BCP 47 IETF language tag)
- null
- undefined
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:
- string (must be two-letter ISO 639-1 language code or a three-letter ISO 639-2 language code)
- null
- undefined
Unit pipe
Use the unit pipe like the following:
{{1.2 | intlUnit: 'hour': options}}
The input can be one of the following:
- number
- string (must be parseable as number)
- null
- undefined
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:
unitDisplay
notation
signDisplay
minimumIntegerDigits
minimumFractionDigits
maximumFractionDigits
minimumSignificantDigits
maximumSignificantDigits
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:
- Iterable of strings
- null
- undefined
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:
Date
object- number (UNIX timestamp)
- string (will be parsed by
new Date()
constructor) - null
- undefined
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:
- Chrome
- Firefox
- Safari
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:
Pipe | Chrome | Firefox | Safari |
---|---|---|---|
Date | 24 | 29 | 10 |
Number | 24 | 29 | 10 |
Percent | 24 | 29 | 10 |
Currency | 24 | 29 | 10 |
Language | 81 | 86 | 14.1 |
Country | 81 | 86 | 14.1 |
Unit | 77 | 78 | 14.1 |
List | 72 | 78 | 14.1 |
Relative Time | 71 | 65 | 14 |
Angular compatibility table
Angular | angular-ecmascript-intl |
---|---|
18 | 4.x |
17 | 3.x |
16 | 2.x |
15 | 1.x |
Background
For more context, see the following GitHub issue