Using ng2-translate with parameters

Question

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.

Chinquapin

Are you actually using a translation pipe? Shouldn't that be translate? – Pastime

Answer 1

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." }

Fanniefannin

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. – Fanniefannin

I tried to put it in a map and it does not work. I'm gonna try in an object directly. Thanks a lot. – Chinquapin

Answer 2

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>

Cap

@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 }}}] – Scarborough

@Scarborough 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 } }}]. – Monadism

@AJQarshi j Q Oooh!...Worked!...unexpected reason for the error, Thanks – Scarborough