How to render a HTML string with a directive

Question

I have a use case where I need to render and transform an HTML node to HTML string and then add a ngx-bootstrap tooltip directive on a specific element in that that HTML string.

I can get the HTML to render fine, by either using InnerHTML with a pipe or creating a separate component, but always after the HTML is rendered the tooltip directive on the element is not registered and I'm not sure where to go from here. I would have though using pure: false on the PIpe would solved it, but it does not.

Here is what've I tried with a pipe:

The Pipe With Tooltip Directive

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { BLOCKS, INLINES } from '@contentful/rich-text-types';
import { Store } from '@ngxs/store';
import { DeckState } from '../__states/deck';

@Pipe({ name: 'rich', pure: false })
export class RichContent implements PipeTransform {
  constructor(private sanitizer: DomSanitizer, private store: Store) {
  }

  transform(content) {


    let options = {
      renderNode: {
        [INLINES.EMBEDDED_ENTRY]: (node) => {
          return `<b [tooltip]="node.data.target.fields.companyName">${node.data.target.fields.companyName}</b>`
        }
      }
      }

      var html = documentToHtmlString(content, options);

      return this.sanitizer.bypassSecurityTrustHtml(html);

  }
}

The HTML

<div [innerHTML]="content | rich"></div>

Outcome

Plain HTML without the tooltip directive working or being registered. For example:

<p>Here is an example from <b [tooltip]="node.data.target.fields.companyName">Mixpanel</b></p>

Hope someone can help me and point me in the right direction to solve this.

from the top of my head.. I think you can't for security reasons, you need to write a component. check [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) if it helps — rmjoia, Apr 15 '19 at 12:04

Matt Saunders · Answer 1 · 2019-04-15T12:18:47.150

I had a similar situation where I was trying to use ngStyle with content I had rendered using innerHTML and my finding (though I'd happily be proven wrong) was that it wasn't possible, because the innerHTML content isn't interpolated by Angular. See here.

The solution in my case was to add the necessary styling at source (server-side) rather than with Angular.

Could you just use a title HTML attribute? Not going to look as nice as Angular but if it's just a tooltip you're after, it might do the trick?

Though as rmjoia suggests, you'd be better off pulling the data you need into a new component and then adding styling, tooltips etc. as required.

score 1 · Answer 2 · answered Apr 15 '19 at 12:14

1

You can't for security reasons, you need to write a component.

Check Angular 2 innerHTML (click) binding same issue, different case though..

Security
Sanitization example

answered Apr 15 '19 at 12:14

rmjoia

962
12
21

How to render a HTML string with a directive

The Pipe With Tooltip Directive

The HTML

Outcome

2 Answers2