Hi! Welcome abroad on this journey. Today, we are going to create an Angular app that supports multi-languages.

Angular app with multi-language support will be more understandable. How you ask? Let’s explain this with an example – an app with cultural language support will have more wider audience than a normal app which only supports the international language of business (English).

Therefore, it’s important to know how to create an angular app that supports the multi-languages using the ngx-translate NPM package, which just makes things much easier for us (the developers).

What we are going to achieve at the end of this tutorial –

• Overview of angular internationalization
• How to use the ngx-translate library for supporting the angular app in two different languages?

Assumptions –

• You have basic knowledge of angular, if not then please go through these other blogs/tutorials from Knoldusor you can visit the official angular docs.
• Your system is configured to spin up a new angular app, if not then just follow this link from the official docs.

Let’s roll!

About the angular internationalization

Angular internationalization

Angular supports multi-languages natively via angular i18n library, which brings localizing the angular app into different versions of locales. Using this we can translate our app content from one language to another, building versions of the app with different languages for different locales. This is generally tricky to configure and takes a lot of time and effort. But this is great if you don’t want to depend on third-party packages like ngx-translate.

The multilingual support is achieved by marking the content of HTML with i18n attribute. Then creating XMLbased translations files with content translations and other translations aids. Configuring the angular.json file with the required language configuration to run in different locales of the region and then deploying compiling the app to different locales with different languages. Each language results in new build with that specific language content.

This is a lot of work and it doesn’t support many other things that we as developers found it useful. Like the feature to switch your site content from one language to another on the fly, without actually compiling and creating a new build. The more languages your angular app supports the more number of builds it will create resulting in consuming more space in your cloud or wherever you have hosted your app.

Although we have solutions to every problem related to this, but not every solution is easy and less time-consuming. That’s why we are using the ngx-translate library. This internally implements the angular internationalization feature in a lot cleaner way. It also paves a way for developers to fine-tune their angular apps without too much hassle. And, this doesn’t need to add a new build to your app every time you add a new language you just have to add the translations in a JSON file and voila that translations will be available to every build of your app.

Let’s code now

Follow the commands or you can just get the repo from this.

Create a new angular app by this command at your preferred location –

ng new yourAngularApp

Here ‘yourAngularApp‘ is the name of the angular app, feel free to change it. Let the command do its work, prompted for styles – choose CSS and when prompted for needing routing – choose no.

Directory structure of the app

Next install the NGX-translate package from the NPM by running this command –

npm install @ngx-translate/core --save

There are many different parts of NGX-translate. We need not to look at all of them, we are just going for the basics here. To load translations from different files we need a loader. By default there is no loader, we have to install it by this command –

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

We can also create our custom loader, but we are going with this one for simplicity sakes. Once installed let’s update the root NgModule of our angular app i.e. app.module.ts to this –

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {HttpClient, HttpClientModule} from "@angular/common/http";
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'en',
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

#angular #tech blogs #user interface (ui)