DEV Community

Cover image for use ngx-translate in angular apps
Micha
Micha

Posted on • Edited on

use ngx-translate in angular apps

#angular #webdev #trasnlation #tutorial

This is a small introduction to multi language support in angular by npm package ngx-translate.
First install ngx-translate in your project:

npm install @ngx-translate/core --save

use in your package.json this entries: works at test-time with versions below

"dependencies": { "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0" },
Enter fullscreen mode Exit fullscreen mode

Now you need to add and configure the TranslateModule to your app.module.ts to load the i18n files. Add Import Statments:

import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {HttpClientModule, HttpClient} from '@angular/common/http'; import { TranslateModule, TranslateLoader, TranslatePipe } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import {TranslateService} from "@ngx-translate/core"; import {AppComponent} from './app'; // Translation Loader Factory export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, '../assets/i18n/', '.json'); } @NgModule({ declarations: [AppComponent], imports: [BrowserModule, MatIconModule, HttpClientModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient], } })], exports: [ TranslateModule, TranslatePipe], bootstrap: [AppComponent] }) // >>> add TranslateService to constructor export class AppComponent { constructor(translate: TranslateService) { translate.setDefaultLang('en'); translate.use('en'); } }
Enter fullscreen mode Exit fullscreen mode

You can use the TranslateService in this way in your component and set the default language:

In app.component.ts add this

import { Component } from '@angular/core'; import {TranslateService} from "@ngx-translate/core"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private translate: TranslateService) { translate.setDefaultLang('en'); translate.use('en'); } }
Enter fullscreen mode Exit fullscreen mode

It make sense to get the default language from your device. Replace the code in constructor with this:

const _defLang = window.navigator.language; translate.setDefaultLang(_defLang); translate.use(_defLang);
Enter fullscreen mode Exit fullscreen mode

In your code use TrasnlateService like this:
translate.get('demo.title').subscribe((res: string) => { ... });

In your HTML-view use pipe:
{{ 'demo.title' | translate }}

Create your JSON translation file in assets-folder.
Each language is stored in a separate JSON file.

Add the English translation to file:

assets/i18n/en-EN.json

Use a translation ID for each text.

{ "demo.title": "Translation demo", "demo.text": "This is a simple demonstration app for ngx-translate" }
Enter fullscreen mode Exit fullscreen mode

Also add a file for german language:
assets/i18n/de-DE.json

{ "demo.title": "Übersetzungs demo", "demo.text": "Das ist eine einfache Beispiel App für ngx-translate." }
Enter fullscreen mode Exit fullscreen mode

Use this Translation IDs in your components to get the text for the set default language.

I hope this short documentation helps to get in ngx-translate within angular a little bit faster.

refer to:
https://phrase.com/blog/posts/angular-localization-i18n/
https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language
https://simpleen.io/translate-angular-i18n

Top comments (0)