Bootstrap popover with angular 2 App

Question

In the angular 2 app, I'm displaying a popover when a button clicked using jQuery. But typescript throwing an error

 Object doesn't support property or method 'popover'

My component

/// <reference path="../shared/bootstrap.ts" />


 import { Component, OnInit } from '@angular/core';
 import * as $ from 'jquery';


  @Component({
    selector: 'my-calender',
    templateUrl: `
       <a class="btn btn-success btn-sm" (click)="openPopover()">Disply Popup</a>
     `
  })

export class CalenderComponent implements OnInit {  

    openPopover(): void {

       var that: any = this;

        $(that).popover({
        title: 'My Popover'

       });
     }  

Typescript compilation is fine. But when I run the app and click that button to shows the popup, it throwing the above error.

But Other boostrap default functionalities are working as expected (nav bar, dropdown).

Answer 1

this is not that..

this refers to the CalendarComponent class. I suggest looking a little more at the tutorials. TypeScript/ES6 has the neat feature that you don't really have to worry about the this context any more. As long as you use () => {} arrow function notations.

In the meantime you can try something like this:

@Component({
    selector: 'my-calender',
    templateUrl: `
       <a class="btn btn-success btn-sm" (click)="openPopover($event.currentTarget)">Disply Popup</a>
     `
})    
export class CalenderComponent implements OnInit {  

    openPopover(target: HTMLElement): void {
       $(target).popover({
        title: 'My Popover'
       });
    }
} 

You can access the event property within a template using the $event variable. This will contain a MouseEvent on click. MouseEvent has a currentTarget property which contains the HtmlElement on which the event was placed. From there you can intialise your jQuery function.

Another idea could be to use @ViewChild , but you will find plenty of examples if you check out the guides and cookbooks at angular.io .

edit

If after all this it still doesn't work, you should make sure you added the tooltip plugin ( tooltip.js ) to your project. Bootstrap needs this to enable popover

Answer 2

In Angular context it is better to use a dedicated, native libraries that provide much better API for the Angular users. There is an excellent implementation for Angular and Bootstrap 4: https://ng-bootstrap.github.io . By using it you could skip the whole jQuery / Bootstrap JS story.

Using Bootstrap's JS means that you would have to load jQuery, Bootstrap's JS and potentially create Angular wrappers around Bootstrap's JS code. But even doing so would result in rather poor integration since both jQuery and Angular would "fight" over DOM updates - the philosophy of those 2 libraries is very different.

On the other hand using popovers from ng-bootstrap is very easy:

<button type="button" class="btn btn-secondary" placement="top"
        ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
  Popover on top
</button>

In the above example ngbPopover directive is all that is needed! You can see in action in a working plunk http://plnkr.co/edit/MiUo2BOPJCVkiVxRT6or?p=preview and check more examples / documentation on https://ng-bootstrap.github.io/#/components/popover