8

I want to use ngx-translate in my frontend to dynamically load translations on app load.

My backend returns a response in JSON format, ex: 

{
   "something: "something"
}

I want to use that output on my TranslateLoader instead of a local en.json file.

Is there any way to achieve that?

TL;DL: I want to call 'http://localhost:xxxx/api/translation/EN' to get a JSON response of the translations and load it on TranslateHttpLoader

Mohammed Ameen
  • 51
  • 5
jdoe1010
  • 103
  • 1
  • 1
  • 5

2 Answers2

8

You can create a factory:

export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "http://localhost:xxxx/api/translation/", "");
}

And use it in your @NgModule imports:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: httpLoaderFactory,
    deps: [HttpClient]
  }
}),
Oram
  • 1,589
  • 2
  • 16
  • 22
  • This looks very simple. Would you mind sharing a bit more information on how to actually use the translation after it's parsed? – jdoe1010 Sep 04 '18 at 12:31
  • You use it the same way as if you use a local translation file (e.g en.json). See more [here](https://github.com/ngx-translate/core#4-use-the-service-the-pipe-or-the-directive) – Oram Sep 04 '18 at 12:36
  • Also, don't forgot to initialize your translation service. See more [here](https://github.com/ngx-translate/core#2-init-the-translateservice-for-your-application) – Oram Sep 04 '18 at 12:39
  • So, i'm following the instructions by letter and still get no result. The JSON response from the server looks like that: { "test": { "name": "value" } } I do this: translate.get('test.name').subscribe(res => console.log(res)); And it still doesn't work properly (doesn't return the translation) – jdoe1010 Sep 04 '18 at 12:47
  • It's very hard to debug in the comment section... are you sure the initialization works? Do you see the response in the dev tools network tab? Can you try using it with the pipe in a template and see if it works? – Oram Sep 04 '18 at 13:15
  • How would this work if I have to change the language selected at runtime? – WannaCSharp Jun 08 '19 at 10:40
4

We can achieve using TranslateLoader provider with Custom Loader Class

In Module :

export class CustomLoader implements TranslateLoader {

  constructor(private http: Http) {}

  public getTranslation(lang: String): Observable<any> {
    return this.http.get(URL).map(
      (res: any) => {
        return res;
      }
    );

  }
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useClass: CustomLoader,
      // useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ]
})

In Component:

 constructor(private _translate: TranslateService){}

 const transText = this._translate.instant('something');
Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27
  • Thanks you for your time man. I just tried this and I get the following Error: `Property 'map' does not exist on type 'Observable'.` . I import Observable from 'rxjs'. – jdoe1010 Sep 04 '18 at 11:53
  • You need to add import 'rxjs/add/operator/map'; – Suresh Kumar Ariya Sep 04 '18 at 11:57
  • Thanks again. I just fixed it. So, now is there any way to load and try the translation loaded on an Angular component? (sorry for the many question, my head is messed up with that problem) – jdoe1010 Sep 04 '18 at 11:59
  • Why you want to load in component. You can add in app.module.ts which will be applicable throughout the app – Suresh Kumar Ariya Sep 04 '18 at 12:02
  • I need to reform my question: At this point the app has parsed the JSON response from the backend. Now I need to use those translations on the app. Let's say that the term: { "label" : "translation" } is returned. How can I use this in my component to translate my text ? – jdoe1010 Sep 04 '18 at 12:05
  • I'm still very confused on how this whole operation is going to work. You have been very helpful but still I'm confused and need to spend more time investigating. – jdoe1010 Sep 04 '18 at 12:19
  • I had to make an adjustment since I am using Angular 13. After defining CustomLoader class, return this new Loader like below: export function HttpLoaderFactory(httpClient: HttpClient): any { return new CustomLoader(httpClient); } And instead of CustomLoader replace with below: useFactory: HttpLoaderFactory, – Tejashri Patange Jul 03 '23 at 21:20