How can I achieve component interpolation with ngx-translate?

Question

I want to be able to obtain this:

<p>Agree with the company's <a href="#" _target="blank">Terms and Conditions</a>.</p>

but without placing any HTML in the translation text.

My translation file should contain the following keys:

{
    "agreement": "Agree with company's {tc}"
    "terms": "Terms and Conditions"
}

What I'm trying to achieve is similar with Vue I18n's component interpolation where I would do something like this:

<i18n path="agreement" tag="p">
    <a place="tc" _target="blank">{{ translate('terms') }}</a>
</i18n>

Is this possible with ngx-translate?

Thanks.

Not sure if I'm understanding your question correctly. Is {tc} what you want to pass as the anchor tag href attribute? — RTYX, Oct 23 '19 at 15:50
Just to make sure: you can't or don't want to use simply something like this:
{{ 'agreement' | translate }} {{ 'terms' | translate }} — RTYX, Oct 23 '19 at 15:55
Unfortunately no, because in some languages the order of words is different. That's why the 'agreement' translation should include the placeholder for the element. — Paul, Oct 23 '19 at 16:00

score 1 · Accepted Answer · answered Oct 23 '19 at 16:26

Hopefully, someone can find a better solution, but in the meantime, this might work for you. Keep in mind that everything inside setTranslation is what you would have in your en.json file. I just didn't want to load it in the StackBlitz. I'm also relying on a sanitizeHtml that you can find inside the example. It's based on this StackOverflow answer.

export class AppComponent  {

  private anchor;

    constructor(private translateService: TranslateService) {
        translateService.use('en');
        translateService.setTranslation('en', {
            HELLO: 'hello',
            AGREE: "Agree with company's {{ anchor }}",
            TC: "Terms and Conditions"
        });

        this.anchor = `<a href="#" _target="blank">${this.translateService.instant('TC')}</a>`
    }
}

<p [innerHTML]="'AGREE' | translate:{ anchor: anchor } | sanitizeHtml"></p>

Thanks for the exhaustive answer, it seems to be a good solution. — Paul, Oct 24 '19 at 06:07

How can I achieve component interpolation with ngx-translate?

1 Answers1