6

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.

user2439903
  • 1,277
  • 2
  • 34
  • 68

1 Answers1

10

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>
Martin Adámek
  • 16,771
  • 5
  • 45
  • 64
  • 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? – user2439903 Apr 25 '18 at 23:05
  • 1
    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). – Martin Adámek Apr 26 '18 at 07:59
  • Apparently the innerHTML property does not work in IE11 - Obviously.... Microsoft and their broken browser..... – schankam Jun 03 '19 at 07:04