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.

Martin Adámek · Accepted Answer · 2018-04-26 08:09:30Z

11

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>

edited Apr 26, 2018 at 8:09

answered Apr 25, 2018 at 16:53

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2439903 Over a year ago

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?

Martin Adámek Over a year ago

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).

schankam Over a year ago

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

Collectives™ on Stack Overflow

ngx-translate: Translate strings in html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related