DEV Community

Cover image for Native Internationalization (Intl) in Angular
Ion Prodan
Ion Prodan

Posted on

Native Internationalization (Intl) in Angular

The Internationalization (Intl) is a built-in JavaScript library that provides a number of useful internationalisation (i18n) and localisation (l10n) features for web applications.

Some of the features provided by the Intl API include support for formatting and parsing numbers, dates, and currencies according to the conventions of different locales, as well as support for collation and case-insensitive sorting of strings.

The Intl is supported by all modern web browsers, and it is widely used in web applications to ensure that they can be easily localised and adapted to different languages and cultures.

Initially, I did not pay much attention to the Intl API as browser support was not as strong, but now (in my opinion) we should take advantage of it as the support has improved.

As I work only in Angular, I decided to build a small library, that wraps some Intl APIs to Angular Pipes.

There's nothing magic in there, simple pipes with custom configurations:

async transform(value: Iterable<string>, locale?: string | string[]): Promise<string> {
    try {
      return new Intl.ListFormat(locale || this.locale, this.defaultOptions).format(Array.from(value));
    } catch (e) {
      return Array.from(value).join(', ');
Enter fullscreen mode Exit fullscreen mode

That's not a library to replace the standard Angular currency, date, number pipes, is just a way to play around with the new Intl features within Angular applications.

It can be used in production as well, if lazy loading poly fills will be implemented.

Here's the link to GitHub repo:

GitHub logo wanoo21 / ngx-intl-helper

This is a collection of pipes for Angular applications that use the Intl API.

Angular Intl API Pipes

This is a simple guide how to run the project. For documentation on how to use the library, please visit the library's README.

Start the project

This project was generated with nx. To start the project, run npm start

Build the library

To build the library, run npm run build helpers


If you want to contribute to this project, please read the contributing guidelines.

Feel free to contribute or ask questions.

Top comments (0)