Use ngx-translate in component

Question

I'm using ngx-translate with no-problems in views, using pipes. What i need to do is to use it in a component, for example to show an error message, or define a datatable column default content.

I'm trying to do something like:

translate.instant("AREA.NEW");

or

translate.get("AREA.NEW").subscribe((res: string) => {
    console.log(res);
});

I've tried calling it in ngOnInit() and ngAfterViewInit()

But in both cases i just get "AREA.NEW", not the translated word. I asume the json dictionary is loaded after my call, so i don't realize how make it work.

The subscibe in the translate.get() observable should give value if "AREA.NEW" is found. Does the console.log(res) still return AREA.NEW? if so verify it's really defined in your transate definition? — Fetrarij, Jul 26 '17 at 06:08
Can you post the whole code? Imports, injection and method where you call the TranslateService. — Nico Van Belle, Jul 26 '17 at 07:20
I will try. @FetraR. it's defined. If do a $(document).ready and inside it any of the options above, it shows the correct translation (after the json is loaded). — jonyjm, Jul 26 '17 at 13:09
for me this works in ngoninit using get + subscribe. it will only return the key without translating, if the key does not exist in the translations. — JockelzF, Feb 19 '18 at 15:51

score 17 · Answer 1 · answered Jun 18 '19 at 12:59

Import the TranslateService and use it wherever you want.

import { TranslateService } from '@ngx-translate/core';

export class YourComponent {
  constructor(private translateService: TranslateService) {
    console.log('translation', this.translateService.instant('my_i18n_json_defined_key'));
  }
}

Toshiaki Aizawa · Answer 2 · 2020-08-03T04:59:18.133

4

It's work.

constructor(private readonly translateService: TranslateService) { }

ngOnInit() {
    this.translateService.get(['']).subscribe(translations => {
        console.info(this.translateService.instant('key1'));
        console.info(this.translateService.instant('key2'));
        console.info(this.translateService.instant('key3'));
    });
}

edited Aug 03 '20 at 04:59

answered Sep 13 '19 at 08:26

Toshiaki Aizawa

101
2
5

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – xiawi Sep 13 '19 at 08:46

score 2 · Answer 3 · answered Nov 16 '22 at 18:22

Another cause for "instant" translation not working can be the translations not being available when required. This might happen when translations are loaded using the TranslateHttpLoader (example here) which loads from translation files in an async way.

One trick to overcome this is shown here (just tested and it works in Angular 13+) and forces the component to wait until the translation is ready by adding a special resolver on its route:

The resolver

@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){ }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>{
        return this.translate.get("does.not.matter"); 
    }
}

Routing usage

{path: "segment", component: YourComponent, resolve: {model: TranslationLoaderResolver}

Use ngx-translate in component

3 Answers3

The resolver

Routing usage

Linked