shaikhspear shaikhspear - 2 months ago 34
JSON Question

Angular 2 binding expression in string (ng2-translate)

I am working on internationalization in angular 2 using ng2-translate.
I have a label which contains string as follows:

<label> Step {{stepNumber}} of {{totalSteps}} </label>


where stepNumber and totalSteps are properties in my component.

for internationalization I am storing a key in my resource files and utilizing with ng2-translate pipe.

en.json:

{
"KEY_STEP_COUNT": "Step {{stepNumber}} of {{totalSteps}}"
}


fr.json:

{
"KEY_STEP_COUNT": "Étape {{stepNumber}} sur {{totalSteps}}"
}


an utilizing it in my html as follows:

<label> {{ 'KEY_STEP_COUNT' | translate}} </label>


The output I get is

en:

"Step {{stepNumber}} of {{totalSteps}}"


fr:

"Étape {{stepNumber}} sur {{totalSteps}}"


Expected Output:

en:

"Step 1 of 11"


fr:

"Étape 1 sur 11"


Is is possible to add an expression in a string binding with angular2?

I want to use angular2 bindings and not string.replace if it is possible.

Thanks for any help!!!

Answer

You have to add an object as a pipe parameter like :

{{ 'KEY_STEP_COUNT' | translate: {stepNumber: 15, totalSteps: 25} }}

Comments