Angular ngx-translate usage in typescript

Question

I'm using this @ngx-translate/core i18n service and it works fine in templates (.html) with this syntax:

{{'my.i18n.key'|translate}}

Now I want to translate something in my component typescript file (.ts) but I don't know how to use it.

I can create translate object in my constructor:

constructor(private translate: TranslateService) {}

and now how to translate 'my.i18n.key' ?

score 102 · Answer 1 · answered Jun 08 '18 at 06:23

102

To translate something in your typescript file, do the following

constructor(private translate: TranslateService) {}

then use like this wherever you need to translate

this.translate.instant('my.i18n.key')

answered Jun 08 '18 at 06:23

GuyFromChennai

1,267
3
10
10

1

this will return the translated string from the en.json (your language) file – GuyFromChennai Jun 08 '18 at 06:24
should be this the correct answer... from doc `/** * Returns a translation instantly from the internal state of loaded translation. * All rules regarding the current language, the preferred language of even fallback languages will be used except any promise handling. */` – Halayem Anis Jul 04 '18 at 13:21
2

I am not sure, bit "instant" works only when the resource content is loaded, if instant is called before the loading of translation resources is finishe (ngOnIt - for example) it returns only the path to the resource. – Václav Švára Dec 03 '18 at 10:33
Thank you, Friend! The solution is really simple and usable! – AlexKh May 02 '20 at 15:50

theforce · Accepted Answer · 2017-08-24T23:47:22.990

49

From the doc on github:

get(key: string|Array, interpolateParams?: Object): Observable: Gets the translated value of a key (or an array of keys) or the key if the value was not found

try in your controller/class:

constructor(private translate: TranslateService) {
    let foo:string = this.translate.get('myKey');
}

edited Aug 24 '17 at 23:47

answered Aug 24 '17 at 23:35

theforce

1,505
1
11
13

5

Thank You! Actually this returns translate object and I had to subscribe to get a string value like this: this.translate.get('my.i18n.key').subscribe(res => { console.log(res); }); – NavCore Aug 28 '17 at 19:17
1

That works like a charme. However, how can I check if there is a translateion, or it doesn't find any? When there's no translation for that key, it just returns that key in the observable, so I can't check the "success" of the translation – dave0688 Mar 14 '18 at 13:19
3

better ```constructor(private translate: TranslateService) { let foo:string = this.translate.stream('myKey'); }``` – netalex Apr 14 '19 at 17:01
2

@netalex Subscribing to `stream` worked for me to update text in real time on language change, while `instant` and subscription to `get` would only trigger once. – Qumber Dec 06 '21 at 13:27

Kevin Jose · Answer 3 · 2020-11-16T13:50:17.683

8

To translate in Typscript file ,do follow code

Import in header

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

In constructor declare as

public translate: TranslateService

Suppose the JSON file looks like this

{
    "menu":{
        "Home": "Accueil"
            }
}

Declare the below code in constructor.

Note: Key stands for your main key value that used in language.json file (Here it is "menu")

 this.translate.get('menu').subscribe((data:any)=> {
       console.log(data);
      });

edited Nov 16 '20 at 13:50

answered Jun 11 '20 at 05:27

Kevin Jose

856
8
22

1

Thank you, it works! also, if you want 'menu.Home' value directly ...you can get it by this.translate.instant('menu.Home')); – Prem G May 24 '21 at 09:13
does it work for nested objects tho? it doesnt for me – Fiehra Oct 17 '22 at 22:03

score 4 · Answer 4 · answered Aug 22 '19 at 10:19

I am using angular 8 > In my case > If you want to translate typescript string into another language then use this > First, make a service file to get translate value, Below is my code for globaltranslate.service.ts file

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

constructor(public translate: TranslateService) {}

Then make a return function........

getTranslation(str) {
    const currentLang = this.translate.currentLang; // get current language
    const returnValue = this.translate.translations[currentLang][str]; // get converted string from current language
    if (returnValue === undefined) {
      return this.translate.translations.en_merch[str]; // if value is getting undefined then return default language string, en_merch is default english language file here
    } else {
      return returnValue;
    }
  }

And in component.ts file, you can import service file and use it like below code...

import {GlobaltranslateService} from '../../../../services/globaltranslate.service';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [GlobaltranslateService]   // add service in provider
})

constructor(
      private gTranslate: GlobaltranslateService // add service into constructor
  ) {}

const title = this.gTranslate.getTranslation('Title text'); // get return value by calling function 'getTranslation' in globaltranslateservice.

This solution is better for all projects of i18n and angular ngx translate

This also works on sweetalert2 strings like below code

Swal (
   this.gTranslate.getTranslation('Warning'),
   data.message,
   'warning'
);

Thanks for reading, If you have any query please message.

What if the translation key has multiple levels like 'USER.PROFILE.NAME' at that time the above code breaks — Nidhin Kumar, Sep 09 '20 at 12:35
For that you can use lodash get property which will handle the above case https://lodash.com/docs/4.17.15#get — Nidhin Kumar, Sep 09 '20 at 13:03

score 4 · Answer 5 · answered Nov 29 '21 at 08:04

You can use translate.instant() method and pass the key name which is stored in your i18n file. for example:

translate.instant('hello');

and If that's coming from a parameter or variable, directly pass the value.

translate.instant(my.i18n.key);

You can also refer to this ans: https://github.com/ngx-translate/core/issues/835#issuecomment-384188498

Enrique González · Answer 6 · 2021-06-18T09:53:38.160

I don't know if the problem is when this was posted, but assigning the "get" method to a variable in order to get the translated string won't work, as it returns an observable

get should be used like this:

constructor(private translate: TranslateService) { }
   :
   :
this.translate.get ('KEY_TO_TRANSLATE').subscribe (x=> this.translation = x);

To get the string you can use the Instant method:

this.translation = this.translate.instant('KEY_TO_TRANSLATE')

However, this is a synchronous method, so if the translation has not loaded yet, you 'll get the key, not the value. It's all explained in the documentation that can be found in Github.

score 2 · Answer 7 · edited May 29 '19 at 22:22

This works for me ( i am using Angular 7). Just import the Translate service on the constructor and then call it from inside myfunction like this :

  getTranslation(){
    let translation = "";
    let clientTranslation = this.translate.get('auth.client').subscribe(cliente =>{
        translation = cliente;
        document.getElementById("clientTest").setAttribute('value', translation);
    }
}

I was using the translation on a form so i pass it to the input with setAttribute, hope this example could help.

score 0 · Answer 8 · answered Mar 31 '21 at 12:48

errorMessage:string="";
constructor(
    protected translate:TranslateService,
  
  ) {   

}

  ngOnInit(): void {
  
   this.translate.get('PLEASE_ENTER_OTP').subscribe(data=>{
      this.errorMessage=data;
    })
  }

You can subscribe the observable in ngOninit

score 0 · Answer 9 · answered May 19 '22 at 18:08

You can use the translate.stream and it will change the value according to the language changes.

constructor(private translate: TranslateService) {
 this.translate
  .stream('my.i18n.key')
  .subscribe((res: string) => {
    console.log(res);
  });
}

Refer https://github.com/ngx-translate/core#methods for more explanation.

Angular ngx-translate usage in typescript

9 Answers9

Linked