In Angular 1.x, it was possible (and rather easy) to take a template string (from a translation service, for example) that contained other directives, and use the $compile function to allow those directives to function. I've found this SO question that seems to provide a solution to a similar problem in Angular 2, but it's much more complicated.
The specific case I have concerns a translated string with an anchor tag in it whose click event needs to be handed by the containing component. We have this working using a @ViewChild reference combined with some direct DOM manipulation (setting innerHtml and using addEventListener directly on the nativeElement). This works, but is not ideal. I'd prefer to have the following:
Component Template:
<p class="text-xs-center" translate [translateParams]="{ callback: clickHandler() }">
INFO_PARAGRAPH
</p>
Where clickHandler() is a method on the component.
/i18n/en.json
{
"INFO_PARAGRAPH": "Here is a <a (click)=\"{{callback}}\">link</a>";
}
I'm looking into turning the solution we have into its own component or possibly just a directive, but haven't finished yet. This is my first Angular 2 app, so I'm still getting up to speed on the differences between 1 & 2. Should I stick with the simple, albeit dirtier way, or is there a better approach that doesn't involve using a component factory and all the code that goes along with that, link in the linked question?
