How to use Bootstrap Popover with Angular2

javascript twitter-bootstrap angular popover
Dylan Harness picture Dylan Harness · Mar 7, 2016 · Viewed 25.9k times · Source

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:

enter image description here

Answer

pleerock picture pleerock · Jun 16, 2016

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>

Related questions

Animation for carousel with ng-boostrap and Angular 2

I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue). My question: is there a way to use …

Read More
Can Bootstrap (4) be integrated along with Angular Material (2)?

I'd like to use Angular Material 2 library, because of its (growing list of) components. But i'm used to bootstrap and it's goodies like responsive utilities and lightweight UI for typical things. By Bootstrap I mostly mean its CSS part, I …

Read More
ng-bootstrap modal is not displaying

Am using ng-bootstrap modal in my application to show dialogue box. but while clicking the button, nothing is happening, the modal is not displaying. while debugging it could find that the action is getting called, but the modal is not …

Read More