Skip to content
ngx-translate

Concepts

ngx-translate offers several customizable classes, making it highly adaptable to virtually any localization requirement.

Core Components

Section titled “Core Components”
  • TranslateService The central service: It provides the API for interacting with your application, enabling you to load translations, switch languages, and retrieve translated messages.

Configuration

Section titled “Configuration”

ngx-translate is configured using provider functions in Angular applications:

  • provideTranslateService The main provider function for configuring ngx-translate in Angular applications. It sets up the TranslateService and all its dependencies.

  • provideChildTranslateService Provider function for child components or lazy-loaded modules that need to extend or customize the parent TranslateService.

For applications using NgModules, see the NgModules Support documentation for configuration with TranslateModule.

Provider Functions

Section titled “Provider Functions”

NGX-Translate v17 uses a modern provider function pattern that replaces the traditional Angular provider syntax. For detailed configuration options, see the Provider Functions section in Configuration.

// Traditional Angular provider syntax
{ provide: TranslateLoader, useClass: CustomLoader }


// NGX-Translate provider function syntax
provideTranslateLoader(CustomLoader)


// Complete example with context
import { provideTranslateService, provideTranslateLoader } from '@ngx-translate/core';


export const appConfig: ApplicationConfig = {
  providers: [
    provideTranslateService({
      loader: provideTranslateLoader(CustomLoader),
      fallbackLang: 'en'
    })
  ],
};

These provider functions should always be used within the provideTranslateService configuration:

// CORRECT USAGE
provideTranslateService({
  loader: provideTranslateLoader(CustomLoader),
  compiler: provideTranslateCompiler(CustomCompiler)
})
// INCORRECT USAGE - Will not work as expected
[
  provideTranslateService(),
  provideTranslateLoader(CustomLoader),
  provideTranslateCompiler(CustomCompiler)
]

Customizable Components

Section titled “Customizable Components”

  • TranslateLoader Handles the loading of translation files. It can either statically import translation data into the app or dynamically fetch it from a server, based on your configuration. Multiple loaders are available as plugins. The default loader, for example, retrieves JSON-formatted translation files from the assets folder at runtime. It is also possible to load other file formats such as .po files.

  • TranslatePipe and TranslateDirective These allow you to use translated texts directly within your templates. Both automatically update the UI when the language is switched at runtime.

  • MissingTranslationHandler By default, if a translation ID is missing, ngx-translate serves the translation from the fallback language, or if unavailable, returns the ID itself. The MissingTranslationHandler allows you to customize this behavior, providing flexibility in how missing translations are handled.

  • TranslateCompiler The compiler pre-processes translations after loading, allowing for performance-intensive operations to be executed once per message. The results are then cached for efficiency. It is commonly used to handle tasks like compiling ICU-formatted messages for advanced localization scenarios.

  • TranslateParser Injects parameters into translation strings, allowing dynamic content such as usernames in greetings or other variable elements in your messages. This is called each time a translation message is requested and should only perform lightweight operations. The default implementation simply replaces all strings in {{...}} with the matching provided parameter.

Imprint Privacy