{"id":2169,"date":"2020-01-07T13:09:57","date_gmt":"2020-01-07T12:09:57","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2169"},"modified":"2025-04-22T10:23:54","modified_gmt":"2025-04-22T08:23:54","slug":"using-pipes-with-ngx-translate","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/using-pipes-with-ngx-translate\/","title":{"rendered":"Using pipes with ngx-translate"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Angular delivers it’s own i18n (internationalizion) API. Although the implementation is already very extensive and mature, some use cases are not covered. This also includes changing the language at run-time. When implementing Angular, a build must exist for each language. To close this gap, packages have been created that extend the functionality. A representative of this is ngx-translate, which we want to discuss in more detail in this post.<\/p>\n

tl;dr<\/strong>
\nEven though Angular delivers it’s own i18n (internationalizion) API, the ngx-translate module is part of most Angular-developers toolkit. While the built-in capabilities of Angular try
\nto cover broader and more complex use-cases, ngx-translate helps to fill the gaps. In this post we have a look at the main use-case, where ngx-translate is superior: changing the language of an application at run-time. This fix comes with a cost though. The Angular pipes and especially the date-pipe don’t respond to the ngx-translate package. As workaround you can use a proxy pipe that extends the functionality and reestablishes the familiar behavior.<\/p>\n

What’s the Problem?<\/h3>\n

When using Angular’s API the application can adapt to the browsers LOCALE_ID. For this to happen, the application has to be rebuild though.\u00a0 When the use of multiple languages is used frequently, unpredictable or in the same session, this is can make the experience more than unpleasant. Luckily we can work around that shortcoming, using ngx-translate. The module makes it possible to switch between different languages as often and whenever you like. Without interrupting the workflow or rebuilding the Application. So far so good! There is one problem though. Using ngx-translate will not be recognized by all the nice pipes angular delivers us. Especially annoying is this behaviour when using the datepipe.<\/p>\n

So is there an opportunity to use the advantages of ngx-translate and still be able to enjoy the convenience of the datepipe? Yes there is, let’s have a look how to manage it.<\/p>\n

Using i18n API of Angular<\/h3>\n

First let’s have a look at the use of Angular’s i18n API. The built-in implementation relies on the use of the LOCALE_ID, which is consumed by dependency injection. You can set the LOCALE_ID by using providers as a container for the window.navigator.language value of the browser. This can be declared in the NgModule metadata of the appModule ( or any Child-Module you need to use it in). The following code-snippet shows an implementation:<\/p>\n

import { LOCALE_ID } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n@NgModule({\r\n    declarations: [],\r\n    imports: [],\r\n    bootstrap: AppComponent,\r\n    providers: [\r\n        { provide: LOCALE_ID, useValue: window.navigator.language }\r\n    ]\r\n})\r\nexport class AppModule {\r\n}<\/pre>\n
Therefore the language is set according to the client’s browser language when building the app – and only when building the app. So unfortunately when we want to change the language on run-time, we are stuck. We would have to rebuild the app every time we want to change the language settings. this might be acceptable for apps, that a seldomly used in different languages or have different builds for different countries. But if we want to create one application, that is used globally and concurrently by user of different nationalities, we run into heavy UX problems. Luckily\u00a0 Oliver Combe<\/a>, the creator of the ngx-translate package, supplied us with a solution. Until recently<\/a> he was working for Angular to incorporate the capabilities of his package into the build-in API, but for now it is not part of the API.<\/p>\n
\n\"Angular\n<\/picture>\n<\/a><\/p>\n
Using ngx-translate<\/h3>\n
So first let’s have a look at the basic usage of ngx-translate. We created a very basic app for demonstration purposes\u00a0 with just one component, that shows the date of our next training (just the current date) and an option to switch between languages.<\/p>\n
As you can see the usage of ngx-translate is pretty straight forward. after having installed the package with the package manager of your choice (we used npm):<\/p>\n
npm\u00a0install\u00a0@ngx-translate\/core\u00a0--save<\/span><\/pre>\n
Then we import the core as TranslateService an use it in the appComponent. Now we add the desired languages in the constructor with the function translate.addLangs([‘en’, ‘fr’, ‘de’]);<\/span> . In our case it’s english, german and french. In the next step we set the default language to english: translate.setDefaultLang(‘en’);<\/span> .\u00a0 Regarding the configuration of the service, that’s already it. Now we define which language is used for starting the app – in our case we use the browser language.<\/p>\n
Therefore we use the function translate.getBrowserLang();<\/span>\u00a0 to get the LOCALE_ID and store it in the constant const browserLang<\/span> . To set a desired language we now can use the function translate.use()<\/span>. Initially we want to determine if the browserLang<\/span> is set to one of the choosable languages. If this is not the case, we initialize the component in english: translate.use(browserLang.match(\/en|fr|de\/) ? browserLang : ‘en’);<\/span> . So now the TranslateService is configured and the initial language set. To use the functionality in the template, we add two more functions. changeLanguage()changeLanguage(language: string)<\/span>\u00a0 which is called when switching the language dropdown and get currentLanguage(): string<\/span>\u00a0 to query the currently selected language.<\/p>\n
import { Component } from '@angular\/core';\r\nimport {TranslateService} from '@ngx-translate\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'ngx-translate without ProxyPipe';\r\n  today: Date = new Date();\r\n\r\n  constructor(public translate: TranslateService) {\r\n    translate.addLangs(['en', 'fr', 'de']);\r\n    translate.setDefaultLang('en');\r\n\r\n    const browserLang = translate.getBrowserLang();\r\n    translate.use(browserLang.match(\/en|fr|de\/) ? browserLang : 'en');\r\n  }\r\n\r\n  public changeLanguage(language: string){\r\n   this.translate.use(language)\r\n  }\r\n\r\n  public get currentLanguage(): string {\r\n   return this.translate.currentLang;\r\n  }\r\n}<\/pre>\n
Having set up the appCompontent.ts we now have a look on the template. We saved the different language strings in the three JSON-files en-json, de-json and fr-json. They all have the following structure:<\/p>\n
{\r\n  \"HOME\": {\r\n    \"TITLE\": \"...\",\r\n    \"TRAINING\": \"...\",\r\n    \"SELECT\": \"...\"\r\n  }\r\n}<\/pre>\n
Looking at the headline h2 we can see, we just print HOME.TITLE<\/span>\u00a0 and use the translate-pipe Angular delivers us. There’s no change in standard procedure.\u00a0 the same happens with the other strings. For the date <p>{{ today | date: “full”}}<\/p>c<\/span>\u00a0 we use the Angular date-pipe.\u00a0 For switching the languages we incorporate a select statement, which triggers the mentioned (change)=”changeLanguage(langSelect.value)”<\/span>\u00a0 function on change and sets the current selection.<\/p>\n
<div>\r\n  <h2>{{ 'HOME.TITLE' | translate }}<\/h2>\r\n  <label>\r\n    <div >\r\n      <p style=\"display: inline\">{{ 'HOME.TRAINING' | translate  }}<\/p> <p>{{ today | date: \"full\"}}<\/p>\r\n    <\/div>\r\n    {{ 'HOME.SELECT' | translate }}\r\n    <select #langSelect (change)=\"changeLanguage(langSelect.value)\">\r\n      <option *ngFor=\"let lang of translate.getLangs()\" [value]=\"lang\" [selected]=\"lang === translate.currentLang\">{{ lang }}<\/option>\r\n    <\/select>\r\n  <\/label>\r\n<\/div><\/pre>\n
Finally we need to import the Translate Module in the appModule. To load the different language JSON-files, we register a loader for the Translate Module. This way the JSON-files can be loaded with the HttpClient.<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { registerLocaleData } from '@angular\/common';\r\nimport { AppComponent } from '.\/app.component';\r\nimport {TranslateLoader, TranslateModule} from '@ngx-translate\/core';\r\nimport {TranslateHttpLoader} from '@ngx-translate\/http-loader';\r\nimport {HttpClient, HttpClientModule} from '@angular\/common\/http';\r\nimport { DateProxyPipe } from '.\/date-proxy-pipe.pipe';\r\n\r\nexport function HttpLoaderFactory(httpClient: HttpClient) {\r\n  return new TranslateHttpLoader(httpClient);\r\n}\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    HttpClientModule,\r\n    TranslateModule.forRoot({\r\n      loader: {\r\n        provide: TranslateLoader,\r\n        useFactory: HttpLoaderFactory,\r\n        deps: [HttpClient]\r\n      }\r\n    })\r\n  ],\r\n  providers: [HttpClient],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\n
Et Voila! We are all set up for a nice user experience for switching the languages we configured at run-time. Check it out and have an overview over the DEMO-app in the Stackblitz following project:<\/p>\n