Dealing in Multiple Countries? Check How Internationalization (i18n) in Angular App Helps you Deal with Languages

When you are into a global online business, at times, you need to have multiple applications, prepared and designed in different languages for different locales and regions. That means dealing with multiple languages or Internationalization is a huge concern for developers building worldwide applications. However, Angular solved this issue by bringing built-in functionalities to deal with Internationalization that is known as i18n -that’s a great effort by Angular.

Angular introduced this functionality in with v6 release in 2018 and it became largely adopted tool globally. Most of the online businesses are looking to expand their business into a global platform. Here, Internationalization is the most suitable functionality for a vendor to get a single application for a worldwide audience. Further, a developer got a handy feature to help clients fulfill their demand with ease.

What is Internationalization in Angular?

Internationalization or i18n, according to Angular, “is the process of designing and preparing your app to be usable in different languages.” Further, localization is the “process of translating your internationalized app into specific languages for particular locales.” In short, the Internationalization (i18n) is term set up by Angular to help developers create products which can be used by people across the world -accessible into their local language and culture.

There are easy steps to follow to make Angular app accessible to global audience. We have explained how you can make this possible. You can access them at the end of this article.

Why is it called i18n?

“i18n” is an abbreviation for the word “internationalization” in which “i” is the first letter plus 18 middle letters and the ending letter “n.” It is not an acronym, technically, but most of the people take it as an acronym of ‘internationalization.’ In fact, it’s a numeronym just like “K9” for canine, and “K-sept” for the word cassette. The word ‘i18n’ first appeared in the late 19th century, though the exact date is unknown.

However, now is widely used in technical term and Angular adopted this implementing a tool called Internationalization of the Angular app.

What is the use of i18n?

Technically, Internationalization (i18n) is functionality provided by Angular, which lets developers create app available in multiple languages. Using the term “i18n”, developers can make an application for a worldwide audience -without making any changes in the engineering.

To understand the concept of Internationalization, you first need to understand what is localization. Lets discuss about it first…

What is the concept of localization?

Localization aka “L10n” is something which translates your internationalized “i18n” app into the local one -for specific region, locality or culture. There’s huge potential that your app can gain a maximum number of an audience if you have provided them stuff in the localized manner. Amazon is widely famous as it has built separate apps for separate regions. However, for new business and startups, it will be a costly affair; therefore, Internationalization provided by Angular can be a great help as you need to build multiple interfaces. A single application can be internationalized with simple tool offered by Angular.

What is the difference between l10n and i18n (localization and Internationalization)?

Internationalization, aka i18n is in a technical term is the functionality introduced in Angular 6 to make app worldwide available without any engineering changes into the web app. You have a feature which will help you internationalize the app, while localizing aka “L10n” is a feature which allows your internationalize app being adopted locally and enable their usability in a particular cultural or linguistic market.

We can say, Internationalization is to make you globally available without making any engineering changes, while localization is the term for helping your internationalized app locally adopted.

Why implement Internationalization?

If you are into a global business and you are largely dependent over website or applications, then you need to create multiple applications based on the particular regions’, text, language, and culture. However, with the evolvement of internationalization tool in Angular, things have become very easy, build a single interface for multiple countries with different languages and text, fonts and culturally adopted.

How is it beneficial to implement Internationalization?

Definitely, it’s a huge benefit as with Internationalization. You have a chance to connect with people’s emotions and emotionally attract them using their local language, texts and culture and most importantly, the currency.

Here’s are some of the top benefits ‘ Internationalization will provide;

• User can see dates, number, percentages, and currencies in a local format
• Handle plural forms of words
• Manage alternate texts
• Text in components templates for translations

How to Implement Internationalization?

That’s important! You need to know how you can implement Internationalization into your app. To implement Internationalization, you need to implement localization.

Locale Setup 

For localization of the app, Angular CLI is the important one as it will generate multiple or as many as required boilerplate which will help in creating files for translators and letting your app communicate or implemented into multiple languages.

• Install CLI using;
• npm install -g @angular/cli
• Enabling your app to use "i18n", you CLI will let you app;
• Extract localize text and send it for translations
• Creating an app for a given locale
• Enabling multiple language versions

A locale which works as an identifier (id), refers to a set of user preferences of a shared region of the world, such as country. The document is known as a locale identifier as a "locale" or "locale id" .

Angular has en-US by default -English spoken in the USA. Angular generally follows, “Unicode LDML convention that uses stable identifiers (Unicode locale identifiers) based on the norm BCP47“.

You can grab more information about Unicode locale from here. Hyperlink: http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers

Angular i18n Pipes

Angular pipes help in creating an app for a worldwide audience. That means they are all meant to help with Internationalization.

Following are the type of pipes;

• The DatePipe
• The CurrencyPipe
• The DecimalPipe
• The PercentPipe

By default, you have only locale data for en-US. You need to set the value of new locale by setting the value of LOCALE_ID. For that, you need to import data of a particular region using the CLI, using the parameter –configuration with ng serve and ng build.

To do it manually, you need follow the step given here;

1. Setting up local

If you are looking for Angular pipes and directives to fully support default formats from other locales This is what you had to do.
As we know Angular by default prefer en-US (English for the United States). So we need to modify the configuration at the top of app.module.ts which enables it to support the locale for the French language in France, which is fr-FR:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

This file @angular/common/locales consist of all necessary local data, however there are some advanced options only be available in the additional dataset which you can import from @angular/common/locales/extra. There is an error message displayed when this is the case.

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';

registerLocaleData(localeFr, 'fr-FR', localeFrExtra);

2. Set the current locale

Angular reads the current locale from an injection token called LOCALE_ID. This means you would have to change that token depending on the locale you’re using and provide appropriate dependency injection configuration for it:
providers: [{provide: LOCALE_ID, useValue: ‘fr-FR’ }]
Note that if you want support for the locale to be changed by the user at runtime, you’ll have to create a class or a factory function to read that value. Here’s an example implementation:

export class DynamicLocaleId extends String {
  locale: string;

  toString() {
    return this.locale;
  }
}

...

providers: [
  ...
  { provide: LOCALE_ID, useClass: DynamicLocaleId }
],

3. Use a translation strategy for all text

Though angular supports text translation with the use of a simple i18n attribute on HTML elements, it requires one build per language. Hence In case of multiple language support while runtime, you need to use ng-translate.

4. Setting-up ngx-translate

ngx-translate is an independent open-source library so the first step is to install it:

npm install @ngx-translate/core --save

you need to install TranslateHttpLoader to download ng-translate.

npm install @ngx-translate/http-loader --save

Now, ngx-translate will retrieve translations from /assets/i18n/[lang].json by default.

...
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';


// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
        ...
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    ...
})
export class AppModule { }

5. Use ngx-translate

Here is an example of en.json for the English language

{
    "HELLO": "hello world"
    "TITLE": "The title of my app"
}

For French;

{
    "HELLO": "bonjour le monde"
    "TITLE": "Le titre de mon application"
}

Having done this, the translator will translate all the text successfully.

In service, it will look something like this;

translate.get('HELLO').subscribe((res: string) => {
    console.log(res);
});

Something similar happens with pipe as well;

{ "HELLO": "hello world"
    "TITLE": "The title of my app"
}

With directive, it will be something like that;

{{ 'HELLO' | translate }}

Set a default language for ngx-translate
Here’s how you can do this;

export class AppComponent {
  constructor(public translate: TranslateService) {
      translate.addLangs(['en', 'fr']);
      translate.setDefaultLang('en');
      const browserLang = translate.getBrowserLang();
      translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
}

However, it will take default browser language, you can customize the behavior.

That’s it. Your job is done! Cheers. You will have you app supporting multiple languages. Take a look at the interface here.

Final Words

If you involve in global business, having an internationalized app is extremely important as you can get enormous benefits by connecting people into their local language and culture. At the same time, if you want to develop multiple application for different regions, and then it is going to be quite costly for you. Why not create a single interface by enabling i18n into your app. That has a great benefit. Let’s do it.