ngx-translate: Translate strings in html

Question

I am using ngx-translate lib to support I18N in my angular app. Can anyone help me to mark the below html snippet for translation?

<span *ngIf="Days < 0 && !shortSentence">
      Follow-up is <span [class.font-bold]="highlightContent">{{ InDays | positiveNumber }} days</span> past due
    </span>

I want to mark only the text content within span tag. How can I make it as parametrized translations?

Any help will be appreciated.

Thanks in advance.

Degradation

Answer 1

This is how you can use parametric translation with filters:

// define translation with parameter
'TRANSLATION_KEY': '{{days}} days'

// use it in template
<span>{{ 'TRANSLATION_KEY' | translate: { days: followUpInDays | positiveNumber } }}</span>

If you want to have the whole sentence as a translation (including the HTML), you will need to use innerHTML property binding:

// define translation with parameter
'TRANSLATION_KEY': 'Follow-up is <span class="{{className}}">{{days}} days</span> past due'

// use it in template
<span *ngIf="Days < 0 && !shortSentence"
      [innerHTML]="'TRANSLATION_KEY' | translate: { className: (highlightContent ? 'font-bold' : ''), days: followUpInDays | positiveNumber }">
</span>

Liken

I get the following output in UI: ""Follow-up is {days} days past due"". The expression {days} is not getting evaluated. How to solve this? – Degradation

You need to use double curly brackets when defining the translation parameter (my bad, I use messageformat in the background so single curly brackets works too for me). – Indihar

Apparently the innerHTML property does not work in IE11 - Obviously.... Microsoft and their broken browser..... – Spinelli