The internationalization (i18n) library for Angular 2+.
Simple example using ngx-translate: https://plnkr.co/edit/WccVZSBM0rUgq2sXSUbe?p=preview
Get the complete changelog here: https://github.com/ngx-translate/core/releases
This is the documentation for the 6.x version, if you're using 5.x or less, refer to this document.
First you need to install the npm module:
npm install @ngx-translate/core --save
If you use SystemJS to load your files, you can check the plunkr example for a working setup that uses the cdn https://unpkg.com/.
If you're importing directly from node_modules
, you should edit your systemjs config file and add '@ngx-translate/core': 'node_modules/@ngx-translate/core/bundles'
in the map and '@ngx-translate/core' : { defaultExtension: 'js' }
in packages.
Finally, you can use ngx-translate in your Angular project. You have to import TranslateModule.forRoot()
in the root NgModule of your application.
The forRoot
static method is a convention that provides and configures services at the same time.
Make sure you only call this method in the root module of your application, most of the time called AppModule
.
This method allows you to configure the TranslateModule
by specifying a loader, a parser and/or a missing translations handler.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
If you use a SharedModule
that you import in multiple other feature modules,
you can export the TranslateModule
to make sure you don't have to import it in every module.
@NgModule({
exports: [
CommonModule,
TranslateModule
]
})
export class SharedModule { }
Note: Never call a
forRoot
static method in theSharedModule
. You might end up with different instances of the service in your injector tree. But you can useforChild
if necessary.
When you lazy load a module, you should use the forChild
static method to import the TranslateModule
.
Since lazy loaded modules use a different injector from the rest of your application, you can configure them separately with a different loader/compiler/parser/missing translations handler.
You can also isolate the service by using isolate: true
. In which case the service is a completely isolated instance (for translations, current lang, events, ...).
Otherwise, by default, it will share its data with other instances of the service (but you can still use a different loader/compiler/parser/handler even if you don't isolate the service).
@NgModule({
imports: [
TranslateModule.forChild({
loader: {provide: TranslateLoader, useClass: CustomLoader},
compiler: {provide: TranslateCompiler, useClass: CustomCompiler},
parser: {provide: TranslateParser, useClass: CustomParser},
missingTranslationHandler: {provide: MissingTranslationHandler, useClass: CustomHandler},
isolate: true
})
]
})
export class LazyLoadedModule { }
By default, there is no loader available. You can add translations manually using setTranslation
but it is better to use a loader.
You can write your own loader, or import an existing one.
For example you can use the TranslateHttpLoader
that will load translations from files using HttpClient.
To use it, you need to install the http-loader package from @ngx-translate:
npm install @ngx-translate/http-loader --save
NB: if you're still on Angular <4.3, please use Http from @angular/http with [email protected].
Once you've decided which loader to use, you have to setup the TranslateModule
to use it.
Here is how you would use the TranslateHttpLoader
to load translations from "/assets/i18n/[lang].json" ([lang]
is the lang that you're using, for english it could be en
):
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
If you want to configure a custom TranslateLoader
while using AoT compilation or Ionic, you must use an exported function instead of an inline function.
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app',
template: `
<div>{{ 'HELLO' | translate:param }}</div>
`
})
export class AppComponent {
param = {value: 'world'};
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
}
Once you've imported the TranslateModule
, you can put your translations in a json file that will be imported with the TranslateHttpLoader
. The following translations should be stored in en.json
.
{
"HELLO": "hello {{value}}"
}
You can also define your translations manually with setTranslation
.
translate.setTranslation('en', {
HELLO: 'hello {{value}}'
});
The TranslateParser
understands nested JSON objects. This means that you can have a translation that looks like this:
{
"HOME": {
"HELLO": "hello {{value}}"
}
}
You can then access the value by using the dot notation, in this case HOME.HELLO
.
You can either use the TranslateService
, the TranslatePipe
or the TranslateDirective
to get your translation values.
With the service, it looks like this:
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
console.log(res);
//=> 'hello world'
});
This is how you do it with the pipe:
<div>{{ 'HELLO' | translate:param }}</div>
And in your component define param
like this:
param = {value: 'world'};
This is how you use the directive:
<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>
Or even simpler using the content of your element as a key:
<div translate [translateParams]="{value: 'world'}">HELLO</div>
You can easily use raw HTML tags within your translations.
{
"HELLO": "Welcome to my Angular application!<br><strong>This is an amazing app which uses the latest technologies!</strong>"
}
To render them, simply use the innerHTML
attribute with the pipe on any element.
<div [innerHTML]="'HELLO' | translate"></div>
-
currentLang
: The lang currently used -
currentLoader
: An instance of the loader currently used (static loader by default) -
onLangChange
: An EventEmitter to listen to lang change events. ALangChangeEvent
is an object with the propertieslang: string
&translations: any
(an object containing your translations).example:
onLangChange.subscribe((event: LangChangeEvent) => { // do something });
-
onTranslationChange
: An EventEmitter to listen to translation change events. ATranslationChangeEvent
is an object with the propertieslang: string
&translations: any
(an object containing your translations).example:
onTranslationChange.subscribe((event: TranslationChangeEvent) => { // do something });
-
onDefaultLangChange
: An EventEmitter to listen to default lang change events. ADefaultLangChangeEvent
is an object with the propertieslang: string
&translations: any
(an object containing your translations).example:
onDefaultLangChange.subscribe((event: DefaultLangChangeEvent) => { // do something });
setDefaultLang(lang: string)
: Sets the default language to use as a fallbackgetDefaultLang(): string
: Gets the default languageuse(lang: string): Observable<any>
: Changes the lang currently usedgetTranslation(lang: string): Observable<any>
: Gets an object of translations for a given language with the current loadersetTranslation(lang: string, translations: Object, shouldMerge: boolean = false)
: Manually sets an object of translations for a given language, setshouldMerge
to true if you want to append the translations instead of replacing themaddLangs(langs: Array<string>)
: Add new langs to the listgetLangs()
: Returns an array of currently available langsget(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>
: Gets the translated value of a key (or an array of keys) or the key if the value was not foundstream(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>
: Returns a stream of translated values of a key (or an array of keys) or the key if the value was not found. Without anyonLangChange
events this returns the same value asget
but it will also emit new values whenever the used language changes.instant(key: string|Array<string>, interpolateParams?: Object): string|Object
: Gets the instant translated value of a key (or an array of keys). /!\ This method is synchronous and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method. If you are not sure then you should use theget
method instead.set(key: string, value: string, lang?: string)
: Sets the translated value of a keyreloadLang(lang: string): Observable<string|Object>
: Calls resetLang and retrieves the translations object for the current loaderresetLang(lang: string)
: Removes the current translations for this lang. /!\ You will have to calluse
,reloadLang
orgetTranslation
again to be able to get translationsgetBrowserLang(): string | undefined
: Returns the current browser lang if available, or undefined otherwisegetBrowserCultureLang(): string | undefined
: Returns the current browser culture language name (e.g. "de-DE" if available, or undefined otherwise
If you want to write your own loader, you need to create a class that implements TranslateLoader
. The only required method is getTranslation
that must return an Observable
. If your loader is synchronous, just use Observable.of
to create an observable from your static value.
class CustomLoader implements TranslateLoader {
getTranslation(lang: string): Observable<any> {
return Observable.of({KEY: 'value'});
}
}
Once you've defined your loader, you can provide it in your configuration by adding it to its providers
property.
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot({
loader: {provide: TranslateLoader, useClass: CustomLoader}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }
Another custom loader example with translations stored in Firebase
By default, translation values are added "as-is". You can configure a compiler
that implements TranslateCompiler
to pre-process translation values when they are added (either manually or by a loader). A compiler has the following methods:
compile(value: string, lang: string): string | Function
: Compiles a string to a function or another string.compileTranslations(translations: any, lang: string): any
: Compiles a (possibly nested) object of translation values to a structurally identical object of compiled translation values.
Using a compiler opens the door for powerful pre-processing of translation values. As long as the compiler outputs a compatible interpolation string or an interpolation function, arbitrary input syntax can be supported.
You can setup a provider for the MissingTranslationHandler
in the bootstrap of your application (recommended), or in the providers
property of a component. It will be called when the requested translation is not available. The only required method is handle
where you can do whatever you want. If this method returns a value or an observable (that should return a string), then this will be used. Just don't forget that it will be called synchronously from the instant
method.
You can use useDefaultLang
to decide whether default language string should be used when there is a missing translation in current language. Default value is true. If you set it to false, MissingTranslationHandler
will be used instead of the default language string.
Create a Missing Translation Handler
import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core';
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
return 'some value';
}
}
Setup the Missing Translation Handler in your module import by adding it to the forRoot
(or forChild
) configuration.
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot({
missingTranslationHandler: {provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler},
useDefaultLang: false
})
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
If you need it for some reason, you can use the TranslateParser
service.
-
interpolate(expr: string | Function, params?: any): string
: Interpolates a string to replace parameters or calls the interpolation function with the parameters.This is a {{ key }}
==>This is a value
withparams = { key: "value" }
(params) => \
This is a ${params.key}` ==>This is a value
withparams = { key: "value" }
-
getValue(target: any, key: string): any
: Gets a value from an object by composed keyparser.getValue({ key1: { keyA: 'valueI' }}, 'key1.keyA') ==> 'valueI'
If you're using npm 2.x, upgrade to npm 3.x, because npm 2 doesn't handle peer dependencies well. With npm 2 you could only use fixed versions, but with npm 3 you can use ^
to use a newer version if available.
If you're already on npm 3, check if it's an error (npm ERR!
) or a warning (npm WARN!
), warning are just informative and if everything works then don't worry !
If you're using an old version of Angular and ngx-translate requires a newer version then you should consider upgrading your application to use the newer angular 2 version. There is always a reason when I upgrade the minimum dependencies of the library. Often it is because Angular had a breaking changes. If it's not an option for you, then check the changelog to know which version is the last compatible version for you.
- Localize Router by @meeroslav: An implementation of routes localization for Angular. If you need localized urls (for example /fr/page and /en/page).
- .po files Loader by @biesbjerg: Use .po translation files with ngx-translate
- ngx-translate-extract by @biesbjerg: Extract translatable strings from your projects
- MessageFormat Compiler by @lephyrus: Compiler for ngx-translate that uses messageformat.js to compile translations using ICU syntax for handling pluralization, gender, and more