title: How to use bootstrap popover in angular 7 using jquery?
body: <p>I am trying to implement bootstrap4 popover using jquery in angular7. I have included "popper.js" in index.html and included using npm too. but it's not working. </p>
  
  <blockquote>
    <p>Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).popover is not a function</p>
  </blockquote>
  
  <p>this error only appears in the console.</p>
  
  <p>HTML:(sample.component.html)</p>
  
  <pre><code>&lt;button id="option2" autocomplete="off" data-toggle="popover"&gt; Public&lt;/button&gt;
  </code></pre>
  
  <p>Jquery: (sample.component.ts)</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as $ from 'jquery';
  
  @Component({
    selector: 'app-sample',
    templateUrl: './sample.component.html',
    styleUrls: ['./sample.component.css']
  })
  export class SampleComponent implements OnInit {
  
    constructor() { }   
    ngOnInit() {   
      $(document).ready(function(){   
        $('[data-toggle="popover"]').popover();     
        $('#option2').popover({
           html: true,
          content: function() {
            return $("#div").html();
          },
           placement: 'bottom'
        });            
      });
    }
  </code></pre>
  
  <p>How to achieve bootstrap popover in angular 7?</p>