Installation
Compatibility with these Angular versions
Choose the version corresponding to your Angular version:
Angular | @codeandweb/ngx-translate | @codeandweb/http-loader | Tutorial |
---|---|---|---|
16 - 18+ | 16.x+ | 16.x+ | |
@ngx-translate/core | @ngx-translate/http-loader | ||
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 @codeandweb/ngx-translate
Start by adding the npm module:
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
:
Initialize the TranslateService
for your application
In your components, add TranslateModule
to your imports
. This gives you access to the
TranslateService for configuration:
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.
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.
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).
Initialize the TranslateService
for your application
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.