Skip to content

TranslateModule API

This content is for v15. Switch to the latest version for up-to-date documentation.

The TranslateModule must be initialized in your app.config.ts or app.module.ts file, depending on your Angular setup.

TranslateModule.forRoot(config: TranslateModuleConfig)

Use this static method in your application’s root module or app.config.ts to provide the TranslateService.

####TranslateModule.forChild(config: TranslateModuleConfig)

Use this static method in your (non-root) modules to import the directive/pipe. This is not required for standalone components.

TranslateModuleConfig

All properties in this configuration object are optional. The configuration can be used for both TranslateModule.forRoot() and TranslateModule.forChild().

Basic configuration

NameTypeDescription
defaultLanguagestringThe default language set on startup, used when a translation is missing in the current language. See the useDefaultLang flag.
useDefaultLangbooleanDefault: true. If true, shows text from the default language if a translation ID is not found. If false, the MissingTranslationHandler is used instead.
extendbooleanExtends translations for a given language instead of ignoring them.
isolatebooleanIsolates the service instance; used only for lazy-loaded modules or components with the “providers” property.

Providers

Providers allow you to replace default implementations of the Loader, Compiler, Parser, and MissingTranslationsHandler with enhanced versions, either from plugins or your own implementation.

NameTypeDescription
loaderProviderProvides a TranslateLoader to load translations.
compilerProviderProvides a TranslateCompiler to prepare translations after loading. The default implementation does nothing.
parserProviderProvides a TranslateParser that interpolates parameters in translations. The default checks translations for placeholders like {{value}}.
missingTranslationHandlerProviderProvides a MissingTranslationHandler that handles missing translations. The default returns the translation key.

Providers use the standard Angular Providers API.

For example, to use the TranslateHttpLoader, use:

app.config.ts / app.module.ts
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient],
},
})

with a factory method to initialize the loader:

const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader =
(http: HttpClient) => new TranslateHttpLoader(http, './i18n/', '.json');
Imprint Privacy