Installation

Compatibility with these Angular versions

Choose the version corresponding to your Angular version:

Angular	@ngx-translate/core	@ngx-translate/http-loader	Tutorial
16 - 18+	15.x+	8.x+	Tutorial
13 - 15 (ivy only)	14.x	7.x+	Tutorial
10 - 12	13.x	6.x+	Tutorial
9	12.x	5.x+	Tutorial
8	12.x	4.x+	Tutorial
7	11.x	4.x+	Tutorial
6	10.x	3.x	Tutorial
5	8.x to 9.x	1.x to 2.x	—
4.3	7.x or less	1.x to 2.x	—
2 to 4.2.x	7.x or less	0.x	—

Installation of the @ngx-translate/core

Start by adding the npm module:

npm

npm i @ngx-translate/core

yarn

yarn add @ngx-translate/core

pnpm

pnpm add @ngx-translate/core

Standalone components or NgModule?

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

Standalone Components You application has a file app.config.ts in src/app. Your components set the property 'standalone:true.'

NgModule You application has a file app.module.ts in src/app. Your components have no 'standalone' property.

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 "@ngx-translate/core";

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 "@ngx-translate/core";

@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:

Loading translation files

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 '@ngx-translate/core';

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

Caution

Note: Never call a forRoot static method in the SharedModule. You might end up with different instances of the service in your injector tree. But you can use forChild if necessary.

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 '@ngx-translate/core';

@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.