angular 5 i18n - Able to use translation strings outside a template

2
votes

I am currently using Angular 5.x and using the directive 'i18n' for translation. I don't have any issue with .html file or the template but couldn't find the way to do this in the typescript file. Is there anyway to have the translation string in the typescript file?

Note:It seems like the Angular build-in i18n didn't support to translate the string in typescript only in the template.

1
angulartypescriptangular-i18n
I't now available. Read here for more github.com/angular/angular/issues/11405#issuecomment-698859281 - Markus

1 Answers

0
votes

No, this is not possible. It will probably be possible with Ivy. See this Github issue.

I've resolved it by creating a translations-component.

HTML:

<div style="display:none">
  <div id="translation_1" i18n>Text to be translated</div>
</div>

TS (can be an injectable service):

constructor(@Inject(DOCUMENT) private document)) {}

public getTranslation(id: string) {
    return this.document.getElementById(id);
}

E.g. in your presentation component you could do: translationService.getTranslation("translation_1");

It's not ideal, but it works well.