8

I tried to use ng2-translate with parameters in the template:

{{ test | translation:{value:param} }}

And it works perfectly. I would like to build my translation in my typescript and I saw this function:

get(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>

But I don't know how to use it.

Do you guys have any example ?

My case is:

en.json:

{ "test":"the level of {value1} and {value2} is low."}

typescript:

let message:string = "";
let parametres = ["1", "2"];
this._translateService.get("test", parametres).subscribe((res:string) => {
    message += res;
});

I would like to have: The level of 1 and 2 is low.

Thanks a lot.

Julien Moreau
  • 151
  • 1
  • 4
  • 16

2 Answers2

21

In en_US.json file, follow the below format to include x and y (which will be our parameters that we want to replace with numbers.

{"Showing": "Showing {{x}} of {{y}}"}

In component.ts, min,max will be the variables that we populate.

  min: number;
  max: number;

and following will be part of component.html

<span> {{ 'Showing' | translate:{x: min, y: max} }} </span>
rt1989
  • 221
  • 2
  • 3
  • 1
    @AJQarshi j Q gives the following error for me: _Uncaught Error: Template parse errors: Parser Error: Missing expected } at the end of the expression [{{'XXXXXXX' | translate:{ minValue: 50, maxValue: 100 }}}]_ – Hany Feb 06 '18 at 11:16
  • 3
    @Hany You are missing a space. That's the issue. Use `[{{'student.certificateInfo.grade.range' | translate:{ minValue: 50, maxValue: 100 } }}]`. Please note the space at the end `} }}]`. – A J Qarshi Feb 06 '18 at 11:24
  • 1
    @AJQarshi j Q Oooh!...Worked!...unexpected reason for the error, Thanks – Hany Feb 06 '18 at 11:44
6

It works when you provide key/values as parameters instead of an array.

typescript:

let message:string = "";
let parametres = {value1: "1", value2: "2"};
this._translateService.get("test", parametres).subscribe((res:string) => {
    message += res;
});

Also according to the docs you should declare the placeholders with double curly braces.

en.json:

{ "test": "the level of {{value1}} and {{value2}} is low." }
Anton Biller
  • 168
  • 1
  • 7
  • You should also check if the Observable returned by get hangs. In my case, the translation was not fully loaded and the Observable never returned anything. – Anton Biller Nov 08 '16 at 09:56
  • I tried to put it in a map and it does not work. I'm gonna try in an object directly. Thanks a lot. – Julien Moreau Nov 09 '16 at 14:20