NG13 - Translate your Angular app with ngx-translate

How to translate your Angular app with ngx-translate:

-----------------------------------------------------------------

Overview steps - 1-6 levels

Add ngx-translate to your Angular application

Setup the TranslateService in your app.module.ts

Create your main language translation file (json)

Use translation markup (translate pipe) in your template files

Translate your json files to other languages

Switch languages at runtime

Extract translations form your source code

npm install -g @angular/cli

ng new translation-demo

cd translation-demo

ng serve

Step 1: Add ngx-translate your Angular application

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

The @ngx-translate/core contains the core routines for the translation: The TranslateService, the translate pipe and more.

The @ngx-translate/http-loader loads the translation files dynamically from your webserver.

Step 2: Set up the TranslateModule and TranslateService

Now you have to init the translation TranslateModule in your app.module.ts. The required changes to that file are highlighted in blue:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

// import ngx-translate and the http loader

import {TranslateLoader, TranslateModule} from '@ngx-translate/core';

import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {HttpClient, HttpClientModule} from '@angular/common/http';

@NgModule({

    declarations: [

        AppComponent

    ],

    imports: [

        BrowserModule,

        // ngx-translate and the loader module

        HttpClientModule,

        TranslateModule.forRoot({

            loader: {

                provide: TranslateLoader,

                useFactory: HttpLoaderFactory,

                deps: [HttpClient]

            }

        })

    ],

    providers: [],

    bootstrap: [AppComponent]

})

export class AppModule { }

// required for AOT compilation

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {

    return new TranslateHttpLoader(http);

}

import { Component, VERSION } from '@angular/core';

import { TranslateService } from '@ngx-translate/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

  name = 'Angular ' + VERSION.major;

  constructor(private translate: TranslateService) {

    translate.addLangs(['en', 'de']);   // in the initial level not required, 

    translate.setDefaultLang('en');

    translate.use('en');

  }

  useLanguage(language: string): void {

    console.log(language);

    this.translate.use(language);

  }

}

Step 3: Create your JSON translation file

Each language is stored in a separate .json file. Let's create the JSON file for the English translation: 

assets/i18n/en.json . Use the texts from the app.components.html .

ngx-translate can read 2 JSON formats:

assets/i18n/en.json

{

    "demo": {

        "title": "Translation demo",

        "text": "This is a simple demonstration app for ngx-translate"

    }

}

assets/i18n/de.json

{

  "demo": {

    "title": "Translation demo - from en json",

    "text": "This is a simple demonstration app for ngx-translate - from en json",

    "greeting": "Hello {{name}}!"

  }

}

app.component.html:

<hello name="{{ name }}"></hello>

<p>Start editing to see some magic happen :)</p>

<button (click)="useLanguage('en')">en</button>

<button (click)="useLanguage('de')">de</button>

<div>

  <h1>Translation demo</h1>

  <p>This is a simple demonstration app for ngx-translate</p>

</div>

<h1>{{ 'demo.title' | translate }}</h1>

<!-- translation: translation pipe -->

<p>{{ 'demo.text' | translate }}</p>

<!-- translation: directive (key as attribute)-->

<p [translate]="'demo.text'"></p>

<!-- translation: directive (key as content of element) -->

<p translate>demo.text</p>

hello.component.ts:

import { Component, Input } from '@angular/core';

@Component({

  selector: 'hello',

  template: `<h1>Hello {{name}}!</h1>

  <p>this pare is from child component</p>

  <p translate>demo.text</p>`,

  styles: [`h1 { font-family: Lato; }`],

})

export class HelloComponent {

  @Input() name: string;

}

ref:

https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate#add-ngx-translate-to-app

https://stackblitz.com/edit/angular-ivy-zywaay?file=src%2Fapp%2Fapp.component.html