Using ng2-translate with parameters
21,254
Solution 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." }
Solution 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>
Author by
Julien Moreau
Updated on August 12, 2022Comments
-
Julien Moreau almost 2 years
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.
-
Anton Biller over 7 yearsYou 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.
-
Julien Moreau over 7 yearsI tried to put it in a map and it does not work. I'm gonna try in an object directly. Thanks a lot.
-
Hany over 6 years@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 }}}]
-
A J Qarshi over 6 years@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} }}]
. -
Hany over 6 years@AJQarshi j Q Oooh!...Worked!...unexpected reason for the error, Thanks