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
