Skip to content

Installation

Compatibility with these Angular versions

Choose the version corresponding to your Angular version:

Angular@codeandweb/ngx-translate@codeandweb/http-loaderTutorial
16 - 18+16.x+16.x+
@ngx-translate/core@ngx-translate/http-loader
16 - 18+15.x8.x+Tutorial
13 - 15 (ivy only)14.x7.x+Tutorial
10 - 1213.x6.x+Tutorial
912.x5.x+Tutorial
812.x4.x+Tutorial
711.x4.x+Tutorial
610.x3.xTutorial
58.x to 9.x1.x to 2.x
4.37.x or less1.x to 2.x
2 to 4.2.x7.x or less0.x

Installation of the @codeandweb/ngx-translate

Start by adding the npm module:

Terminal window
npm i @codeandweb/ngx-translate

Standalone components or NgModule?

The installation differs a bit depending on which concept you are using in your app:

Using Standalone Components

Initialising the TranslateService

To use ngx-translate in your project, use the provideTranslateService() function in appConfig:

app.config.ts
import {ApplicationConfig, provideZoneChangeDetection} from "@angular/core";
import {provideTranslateService} from "@codeandweb/ngx-translate";
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideTranslateService({
defaultLanguage: 'en'
})
],
};

Initialize the TranslateService for your application

In your components, add TranslateModule to your imports. This gives you access to the TranslateService for configuration:

app.component.ts
import { Component } from '@angular/core';
import {
TranslateService,
TranslatePipe,
TranslateDirective
} from "@codeandweb/ngx-translate";
@Component({
selector: 'app-root',
standalone: true,
imports: [TranslatePipe, TranslateDirective],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private translate: TranslateService) {
this.translate.addLangs(['de', 'en']);
this.translate.setDefaultLang('en');
this.translate.use('en');
}
}

Now, skip the next chapter:

Using NgModule

Initialising the TranslateModule

To use ngx-translate in your project, import TranslateModule.forRoot() in the root NgModule of your application.

The forRoot() static method provides and configures services simultaneously. Ensure it’s only called within the root module of your application, commonly referred to as AppModule.

This method lets you configure the TranslateModule by specifying a loader, a parser, and/or a MissingTranslationHandler. Additionally, you can set the default language using defaultLanguage.

See the section Translate Module API for details.

app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@codeandweb/ngx-translate';
@NgModule({
imports: [
BrowserModule,
TranslateModule.forRoot({
defaultLanguage: 'en'
})
],
bootstrap: [AppComponent]
})
export class AppModule { }

Usage with SharedModules

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

Lazy loaded modules

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.

To make a child module extend translations from parent modules use extend: true. This will cause the service to also use translations from its parent module.

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

Initialize the TranslateService for your application

app.component.ts
import {Component} from '@angular/core';
import {TranslateService} from '@codeandweb/ngx-translate';
@Component({
selector: 'app',
template: `
<div>{{ 'app.hello' | translate:param }}</div>
`
})
export class AppComponent {
param = {value: 'world'};
constructor(translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en');
}
}

setDefaultLang() sets the default language. The default language is used as a fall-back if no translation is found in the currently selected language. You can also do this at application startup using the TranslateModule.forRoot({defaultLanguage:'en'}).

use() sets the current language for the application. If the selected language is not yet loaded, the loader is invoked to retrieve the file.

Imprint Privacy