Angular ngx-translate usage in typescript

how to use ngx-translate in ts file
angular i18n translate in ts file
ngx-translate angular 8
ngx-translate angular 7
ngx-translate in component
ngx-translate/http-loader
ngx-translate angular 6
ngx-translate dynamic values

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

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

ngx-translate/core, But, now I have to use the translation in "Component(.ts)" file as well. **Please tell us about your environment: Angular 5, type Script. In most of our projects, we use the ngx-translate for handling translations. Angular CLI’s i18n does not support runtime translations yet (issue #16447). Using i18n in a project seems (and

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

Access translate from .ts file (Angular2) · Issue #738 · ngx-translate , To translate something in your typescript file, do the following. constructor(private translate: TranslateService) {} then use like this wherever you  There is an open question on Angular GitHub repo. For more info, check this out. Unfortunately, typescript's strings are not supported yet officially. However, some devs proposed a few workarounds you could take a look at.

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.

How to translate your Angular 8 app with ngx-translate, Free tutorial: Set up Angular 8 with ngx-translate, extract translations from This tutorial uses the newest Angular 8 together with ngx-translate 11. Sometimes you have to add translatable strings to your TypeScript code. ngx-translate-​extract  This tutorial uses the newest Angular 8 together with ngx-translate 11. It also works with Angular 7 without any changes. A version of the tutorial covering Angular 6 is available from here: How to translate your Angular 6 app with ngx-translate.

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.

Internationalize Your Angular App with ngx-translate ← Alligator.io, Here's a guide on how to use the ngx-translate library to internationalize (i18n) your Angular apps with ease. ngx-translate-all by @irustm: Automate translations for Angular projects. ngx-translate-migrate by @irustm: Automate migrations from ngx-translate to Angular i18n. ngx-translate-lint by @svoboda-rabstvo: Simple CLI tools for check ngx-translate keys in whole app; ngx-translate-cut by @bartholomej: Simple and useful pipe for cutting translations ️

Typed translations in Angular - Angular In Depth, TypeScript, dependency injection and lazy loading as an elegant In most of our projects, we use the ngx-translate for handling translations. Use po files with ngx-translate. Contribute to biesbjerg/ngx-translate-po-http-loader development by creating an account on GitHub. upgrade to angular 6.

Angular + @ngx-translate + Typings - The Startup, When you decide to use Angular in a project, it means that you are building a large SPA (otherwise, you should think of another framework). A loader for ngx-translate that loads translations with http calls

theCodeCampus → Using pipes with ngx-translate, The Angular pipes and especially the date-pipe don't respond to the ngx-​translate package. As workaround you can use a proxy pipe that  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. This assumes that you've injected TranslationService as translate in your component.

Comments
  • 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); });
  • 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
  • better constructor(private translate: TranslateService) { let foo:string = this.translate.stream('myKey'); }
  • this will return the translated string from the en.json (your language) file
  • 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. */
  • 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.