How to assign html content to ngbPopover and popoverTitle when it is part of a nested element?

Question

I have a nested component that uses ngbPopover and popoverTitle. The content that will be displayed will be given through @Input() properties.

The problem: If the given input is like "<b>Some Title</b>", I would like to have that be bold rather than displayed literally.

I tried using as described in the docs here, but in my case, whatever I bind will have the markup. My markup isn't predefined. So that didn't help.

import { Component, Input } from "@angular/core";

@Component({
    selector: "help-popup",
    template: `<span 
      class="fa fa-question-circle-o btn-outline-info btn-sm"
      style="font-size: 18px" triggers="focus:blur"
      [placement]="placement"
      [ngbPopover]="helpText"
      container="body"
      [popoverTitle]="helpTitle"></span>`
})

export class HelpPopupComponent {
    @Input() placement: string = "top";
    @Input() helpText: string = "";
    @Input() helpTitle: string = "";
}

I want to use it like:

<help-popup helpTitle="<b>Bold Title</b>"
              helpText="<u>Underline text</u>"></help-popup>

Answer 1

The ng-bootstrap Popover component allows HTML in its content but, as far as I can see in the documentation, not in its title: the ngbPopover property can be a template, the popoverTitle property is just a string.

This plunker, adapted from the ng-bootstrap documentation, shows how to display helpText as HTML content in the popover. In the popover template, the value of helpText is assigned directly to the innerHTML property of a div element to avoid the HTML escaping that would occur with interpolation:

<ng-template #popContent><div [innerHTML]="helpText"></div></ng-template>

and the template is bound to the ngbPopover property of the element:

<button ... [popoverTitle]="helpTitle" [ngbPopover]="popContent">
  ...
</button>