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:
('#terms').onclick(....);
Do you have any ideas how this can be done (probably in some different way)?