use ngx-translate in angular apps

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"
},

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');
             }
 }

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');
  }
}

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);

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"
}

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."
}

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