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

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

Answer 2

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 3

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 4

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 5

You have basically 3 choices

1. If you are absolutely sure that your translation files are already loaded and you don't want to update the translations automatically if a language changes use translate.instant('ID').

2. If you are not sure about the loading state but you don't need updates on language changes use translate.get('ID'). It gives you an observable that returns the translation once it's loaded and terminates the observable.

3. If you want constant updates (e.g. when a language changes) use translate.stream('ID') - it returns an observable that emits translation updates. Make sure to dispose the observable if you don't need it anymore.

E.g.

 export class AppComponent {
        constructor(translate: TranslateService) {
            translate.get('hello.world').subscribe((text:string) => {console.log(text});
        }
    }

/** Where 'hello.world' is a key in your file for the change of language **/