Access Angular2 translation from component or service

Question

I am currently in the process of translating my first Angular2 application based on the guidelines in https://angular.io/docs/ts/latest/cookbook/i18n.html

The examples only always show how to apply the i18n attribute to template code and how the template's code is then internationalized.

How would I access localized text from the component's code (the .ts file) or inside a service? I need this for interaction with some JavaScript libraries I am using, where I need to call a JavaScript function with the localized text.

Unfortunately it seems exactly like #11405. I did not find this issue upon research, and I was under the impression that something that fundamental needs to be available. I wanted to stay offical "angular2", but i18n seems too incomplete for now. — Martin Carpella
– Martin Carpella, Commented Nov 11, 2016 at 14:08

Daniel Kucal · Accepted Answer · 2017-08-09 01:39:44Z

12

If you were using ng2-translate module, you could just inject TranslateService:

constructor(private translateService: TranslateService) { }

and use its get(translationKey: string) method returning an Observable.

this.translateService.get('stringToTranslate').subscribe( translation => { console.log(translation); });

edited Aug 9, 2017 at 1:39

answered Nov 11, 2016 at 14:06

Daniel Kucal

9,3227 gold badges46 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Carpella Over a year ago

Seems like ng2-translate is still the way to go for now. Thanks!

Mohamed Sahir Over a year ago

@Daniel I need to translate response values which have nearly 50 columns to translate form ngOnInit hooks, i need to specify each key can you provide better resuable way

this.productSrevice.getProduct().subscribe(response => { this.cols = [ { field: 'response.data.productId', header: this.translateService.instant('Home.productID')}, { field: 'response.data.productName', header: this.translateService.instant('Home.productName') }, etc ]; console.log(this.translateService.instant('Home.productID')); }

Lucianovici · Accepted Answer · 2017-02-18 15:06:16Z

I'm using the attribute translation feature.

import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-sandbox', templateUrl: 'sandbox.html' }) export class SandboxComponent implements OnInit { @Input() public title: string; constructor() { } ngOnInit() { console.log('Translated title ', this.title); } }

From the parent component template:

<app-sandbox i18n-title title="Sandbox"></app-sandbox>

It is a workaround, but still, I think it's the cleanest one so far. It gives you access to the translated title within ts.

But this is for a Component. This won't work in a service, will it?
I'm actually using it in a service, passing the title to the service using a setter within ngOnInit. Well yeah so the solution is component specific, the service knows about it from the component, which is not that clean after all :)
I agree it is the cleanest available solution. Although I still hope the official i18n tools are going to be improved.

Arunsai B K · Accepted Answer · 2018-09-27 14:43:17Z

 constructor(private translate: TranslateService) { } this.translate.get(this.pageTitle).subscribe((text:string) => { this.translate.onLangChange.subscribe((event: LangChangeEvent) => { title.setTitle(this.translate.instant(text)) }); });

Salah Atwa · Accepted Answer · 2020-03-20 12:02:36Z

if you want to detect on Language change use below code , pass your title key

this.setDocTitle('dashboard.title'); setDocTitle(titleKey: string) { this.translate.onLangChange.subscribe((event: LangChangeEvent) => { this.translate.get(titleKey).subscribe((text:string) => { this.titleService.setTitle(this.translate.instant(text)); }); }); }

Collectives™ on Stack Overflow

Access Angular2 translation from component or service

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Related