Angular ngx-translate usage in typescript
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');
}
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')
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);
});
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.