Angular2 i18n - How to get translation through code

Question

I could not find any documentation in the i18n (for Angular2) that goes beyond showing the translated text in the HTML. What I need to do is to get the translated text directly in my code. In Angular 1 using the ng-translate feature, it was easy to get it using a $translate service. I can't find the equivalent in the new i18n for Angular 2. Am I missing something?

Answer 1

Since Angular 9 there is an experimental and undocumented $localize tag function. It can be applied to a template string.

greetings = $localize`Hello ${this.world}!`;

Internationalization with @angular/localize

Answer 2

This is the link to issue on github about i18n plans:

https://github.com/angular/angular/issues/9104

on 06-11-2016 @zh99998 asked:

how to get i18n string in script? for example:

let _THIS_IS_A_I18N_STRING = ??? alert(_THIS_IS_A_I18N_STRING);

and @vicb (angular2 member) said:

@zh99998 @marcalj This is not possible with the current impl. Could you please create a proper feature request in the issue tracker filling out the issue template and adding use cases (and link to other implementation if applicable).

Thanks.

It seems that currently there isn't possibility to use translations in code.

Although, there is library for angular2 similar to $translate:

https://github.com/ocombe/ng2-translate

Usage similar to $translate (from docs):

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

Usage similar to translate filter (from docs):

<div>{{ 'HELLO' | translate:param }}</div>

In my case (ng1/ng2 hybrid app), this was the best solution, as I am able to use same translation files for both angular versions.

Answer 3

I have searched the same theme. It seems, Angular i18n does not support to use out-of-box behavior to translate string in ts code yet.

https://github.com/angular/angular/issues/11405

We have implemented a translate service and use pipe together. There are some other libs, e.g. ngx-translate to use translation in source code. The following is angular design document about i18n.

https://docs.google.com/document/d/1LH7lJ1GjRgpGUjzNb6Eg4xrPooRdi80QOTYYh8z_JyY/edit#

In Chapter "Prior Art", some libraries are listed in table to be compared, but none of them support AOT.

Answer 4

Perhaps this has been answered but the following did it for me.

import { TranslateService } from '@ngx-translate/core';


private translate: TranslateService;


const response= this.translate.instant('HELLO_WORLD');

It seems there are two methods for this:

1. the get method returns an observable
2. the instant method returns the translation directly. Only caveat, the instant method is synchronous

See notes on their documentation regarding the instant method. https://github.com/ngx-translate/core

This method is synchronous and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method. If you are not sure then you should use the get method instead.