Injecting parameters and HTML into ngx-translate key

Question

Is this possible? Say I have the following text I want to translate:

<p>You currently have <span class="bold">{{rewards?.points}}</span> points worth <span class="bold">{{rewards?.amount | currency}}</span> statement credit.</p>

I want this text to be translatable but two things are tripping me up - how to inject variables number of points/amount and how to preserve the bolded span tag.

From my en-US.json file:

"statement": "You currently have {{points_param}} points worth {{credit_param}} statement credit."

Doing the following works if I want to use a static value for the points/amount, but that doesn't preserve the bold styling or allow for a variable value.

<p [innerHTML]="'redeem.statement' | translate:{points_param:'50',credit_param:'100'}"></p>

Answer 1

Try this code:

en-US.json file:

"statement": "You currently have <span class='bold'>{{points_param}}</span> points worth <span class='bold'>{{credit_param}} </span> statement credit."

In the component HTML file:

<p [innerHTML]="'redeem.statement' | translate:{points_param:'50',credit_param:'100' | currency }"></p>

Make sure that CSS should be added for span bold class.