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' ?

Answer 1

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')

Answer 2

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);
      });

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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

Answer 8

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.