Search code examples
angulartypescriptpopoverng-bootstrap

ng-bootstrap, popover with dynamic html content

I'm trying show a popover with html content. I'm using ng-bootstrap and I have troubles to do that.

html code

<button type="button" class="btn btn-lg btn-danger" ngbPopover="{{getPopoverData(component.additional)}}" triggers="mouseenter:mouseleave" popoverTitle="Información Adicional">
                                    Hover over me!</button>

typescript

getPopoverData( data ) :HTMLElement {
    let list = "";
    data.forEach(el => {
      list += `<li><strong>${el.name}:</strong> ${el.value}</li>`;
    });
    var element = document.createElement("ul");
    element.innerHTML = list;
    return  element;
  }

But, the results is this:

1

I don't know what's wrong.

Solution

  • AFAIK, It's not meant to use it that way. The signature of the ngbPopover is only accepting string or templateRef. I created a quick example snip from ngbPopover and simulate what you try to achieve. Have a look here: https://stackblitz.com/edit/angular-qolg5d