How to translate ts variables in angular 4?

Question

How to translate angular variables in template or ts file itself
HTML code - someComponent.html

<button (click)="changeLang('en')">En</button>  
<button (click)="changeLang('de')">de</button>  
<p>{{rate}}</p>

Ts File - someComponent.ts

rate:string="productRate";
changeLang(lang){  
  this.translate.use(lang);
  this.traslate.get(this.rate).subscribe(res=>{this.rate = res;});
}

Json file-en.json

{ "productRate": "Product Rate" }

Json file-de.json

{ "productRate": "Produktpreis" }

I know how to do it in template using pipe but unable to do it in ts.
I had referenced stack overflow but unable to get the result. Please help

Are you using a library ? If so, state this in your question — user4676340
– user4676340, Commented Jul 26, 2018 at 9:34

Sajeetharan · Accepted Answer · 2018-07-26 09:34:43Z

2

From Docs

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

You have to inject TranslateService as a dependency and do it as,

constructor(private translate: TranslateService) {
    let foo:string = this.translate.get('productRate');
}

answered Jul 26, 2018 at 9:34

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

pjay Over a year ago

I injected the service sajeeth, to keep it simple I had posted without that.

Sajeetharan Over a year ago

what do you mean

pjay Over a year ago

this.traslate.get('productRate').subscribe(res=>{this.rate = res;}); this will work. because translate.get returns observable.

Collectives™ on Stack Overflow

How to translate ts variables in angular 4?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related