Angular ngx-translate usage in typescript
AngularTypescriptNgx TranslateAngular Problem Overview
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' ?
Angular Solutions
Solution 1 - Angular
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')
Solution 2 - Angular
From the doc on github:
> get(key: string|Array
try in your controller/class:
constructor(private translate: TranslateService) {
let foo:string = this.translate.get('myKey');
}
Solution 3 - Angular
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);
});
Solution 4 - Angular
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.
Solution 5 - Angular
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.
Solution 6 - Angular
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.
Solution 7 - Angular
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
Solution 8 - Angular
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