javascript - How to use Bootstrap Popover with Angular2 - Stack Overflow

admin管理员组

文章数量:1202361

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:

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:

• javascript
• twitter-bootstrap
• angular
• popover

Share Improve this question Follow edited Jul 12, 2016 at 15:50 Xan 77.5k1818 gold badges196196 silver badges216216 bronze badges asked Mar 7, 2016 at 2:25 Dylan HarnessDylan Harness 72911 gold badge99 silver badges2020 bronze badges 6

• Can you add the plunkr? Bootstrap and external JS files do have know issues here. Even I am facing similar issues with Bootstrap and data-toggles. Some work out of box and some dont. – Gary Commented Mar 7, 2016 at 2:29
• Much better to get rid of bootstrap.js and use angular-ui-bootstrap but if you want to continue you need to initialize jquery plugins in directives to assure element exists when code is run. As for compiling interpolation braces that won't happen...get content in directive – charlietfl Commented Mar 7, 2016 at 2:34
• 1 I am under the impression angular-ui-bootstrap for angular2 is called github.com/ng-bootstrap/core and only supports 3 components atm. Unfortunately, popover doesn't seem to be one of them – Dylan Harness Commented Mar 7, 2016 at 2:37
• 1 why dont you try angular ui bootstrap. angular-ui.github.io/bootstrap – Nagaraja Thangavelu Commented Mar 7, 2016 at 3:00
• 1 @Naga2Raja we are talking about Angular 2 and Bootstrap 3 here – Toolkit Commented Dec 10, 2016 at 20:19

 |  Show 1 more comment

3 Answers 3

Sorted by: Reset to default 12

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>

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.

yes this is possible but you cannot call interpoleted symbol into jQuery plugin the way you are doing. you have to assign your dynamic email directly using this like this.

ngOnInit(){
   $('#abc').popover({
      placement: 'bottom',
      toggle: 'popover',
      title: 'khcksahkdfs'
      html: true,
      content: this.name
    });
 }

 <a id="abc">Toggle popover</a>

working Demo here

本文标签： javascriptHow to use Bootstrap Popover with Angular2Stack Overflow