0

I'm developing a text based chat using Angular 2 and the following template which feeds in text/HTML from a service:

<div *ngFor="let message of chatService.messages" class="chatLineContainer">
    <span class="chatTimestamp">{{message.formatted_timestamp}}</span><span class="chatUsername">{{message.prefix}}</span><span class="chatColon">:</span><span class="chatText" [innerHTML]="message.chatHTML"></span>
</div>

The chat has emotes which can be placed anywhere in the HTML. As per this question I'm currently using [innerHTML]="message.chatHTML" to insert the HTML but unfortunately it's not compiling this code so it's not running any bindings such as events or directives.

As an example, message.chatHTML could be using the tooltip directive as follows:

Testing <img class="chatEmote" tooltip="Testing the tooltip" data-direction="bottom" alt="Emote" src="https://emote.domain.com/emote73628"> Testing

There are many questions on here regarding this but most seem out of date (eg, suggesting to use DynamicComponentLoader) and/or unclear for this specific case where the HTML is dynamic and determined by the user. Something like this would be simple using normal Javascript with traditional events but that isn't the case for Angular2, if someone could please clarify the best way forward so that the HTML inserted can use directives/events it would be appreciated.

Community
  • 1
  • 1
Joey Morani
  • 25,431
  • 32
  • 84
  • 131
  • You can dynamically create and compile components http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 There is no way to make Angular process bindings or component selectors in HTML added by `innerHTML` – Günter Zöchbauer Jan 16 '17 at 12:15
  • That seems like a lot of code for something seemingly as simple as inserting some HTML with bindings. I'm willing to upgrade to a beta version of Angular2 if that includes any features which may help with this. – Joey Morani Jan 16 '17 at 14:02
  • There are no such features, also not in Angular4 – Günter Zöchbauer Jan 16 '17 at 14:03

0 Answers0