How to use Bootstrap Popover with Angular2

Question

I am trying to get a Bootstrap 3 popover to display an Angular 2 interpolated template. Is this possible? Here is what I have so far:

    $('.ba-header--user-menu').popover({
      placement: 'bottom',
      toggle: 'popover',
      trigger: 'focus',
      html: true,
      content: '{{user.email}}'
    });

Which gives me this:

Answer 1

JQuery and Angular don't play very well together. Install ng2-popover:

npm i ng2-popover

and use it like this:

<span popover="content to be shown in the popover">
    element on which this popover is applied.
</span>

Answer 2

You can also try a library I published ng2-pop-over (not to be confused with ng2-popover mentioned above). It is compact and you'll have to add your styles but has what it takes to solve your problem without jQuery.