I18n of Ionic 2 application with locale-specific HTML content


I’d like to bind onclick event to unsafe HTML added via [outerHTML]=“expr | pipe”, because I’m implementing i18n of my Ionic 2 application. I’ve already figured out that Angular 2 team refuses to support this despite a lot of valid use cases, so I’m interested either in hacking Angular code or finding completely different solution for i18n.

How my solution currently works:
I create JSON resource files containg i18n strings and assemble them into TypeScript module via gulp-merge-json. I use the assembled object in a pipe, which extracts particular value from it based on locale name and key. When I deal with plan strings, it works perfectly. Additional benefit for this solution compared to ng2-translate is that the implementation logic is very simple and does not involve AJAX roundtrip.

Now I want to do a tricky thing:
I want to put HTML in i18n resource. The reason for that is that there may be long phrases, containing a link inside them. In different languages these links may be positioned differently in the text and I’d like to avoid splitting the phrase into multiple parts, which do not make sense themselves alone. Instead, I’d like to put HTML in i18n resources, render it and bind onclick events dynamically, something like that:

"terms" : "By registering...<a id="terms">Terms of Use</a> and our <a id="Privacy">Privacy Policy</a>."

Somewhere in the code:

Do you have any ideas how this can be done (probably in some different way)?


Update: I was able to partially solve it with custom pipe, that adds following code in each processed <a> tag:

<a onclick="document.getElementById(target).dispatchEvent(new Event('doClick'));">...</a>

Where target is the pipe parameter as shown in this example:

<div id="myDivId" (doClick)="clickHandlerMethod()"> {{ my.resource.key | translate | onclick:'myDivId' }} </div>


Hi ivangammel

I am developing an ionic2 app and i need to get dynamic html from server and show in my app

All is fine… but as per you know angular directives are not working there when we use inner html…

I have seen that you already did some hack with this…

But i can not made it as per you suggest

Can you please explain it a little bit more in detail how to do this…