CODEWITHSUNDEEP
javascripttwitter-bootstrapangularpopover
Dylan Harness
Dylan Harness

Reputation: 729

How to use Bootstrap Popover with Angular2

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

Upvotes: 12

Views: 26745

Answers (3)

Meir
Meir

Reputation: 14375

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.

Upvotes: 2

pleerock
pleerock

Reputation: 18836

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>

Upvotes: 12

Pardeep Jain
Pardeep Jain

Reputation: 86730

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

Upvotes: 1

Related Questions