shaikhspear shaikhspear - 1 year ago 188
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.


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


"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


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


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

Expected Output:


"Step 1 of 11"


"É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 Source

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

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