how to make popover element in angular

Question

I am using angular with openlayers and I am following the example posted below in the link:

        https://openlayers.org/en/latest/examples/overlay.html

that example contains the following code:

  var element = popup.getElement();
  var coordinate = evt.coordinate;
  var hdms = toStringHDMS(toLonLat(coordinate));

  $(element).popover('dispose');
  popup.setPosition(coordinate);
  $(element).popover({
    container: element,
    placement: 'top',
    animation: false,
    html: true,
    content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
  });

in angular when i compile the code it generates error for

$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({

it says that poppver is not a function and the

$(element)

is not recognized by the IDE visual code.

what is the equivalent to $ sign in angular and how to adapt the above mentioned lines to accommodate in angular code

The `$` is most likely coming from jQuery, so you might need to add jQuery to your angular project. — cloned, Mar 30 '21 at 06:10
@cloned would you please tell me how to add jquery to my angular project — Amrmsmb, Mar 30 '21 at 06:11
Does this answer your question? [How to use jQuery with Angular?](https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular) — cloned, Mar 30 '21 at 06:19
@cloned now i installed jquery and imported the required packages ...but the console of the browser tells me popover is not a function...would you please help me to solve it — Amrmsmb, Mar 30 '21 at 06:25
Check the documentation you linked and read the first sentence: `The popups are created using Popovers from Bootstrap` Follow the link to bootstrap to find out what you need to get popovers from bootstrap working. — cloned, Mar 30 '21 at 06:27
@cloned maybe you would like to have a look at this question:https://stackoverflow.com/questions/66865897/how-to-include-popper-js-and-bootstrap-js-in-angular-project — Amrmsmb, Mar 30 '21 at 06:40

score 0 · Answer 1 · answered Mar 30 '21 at 06:53

You might have missed to import some thing

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import Overlay from 'ol/Overlay';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {fromLonLat, toLonLat} from 'ol/proj';
import {toStringHDMS} from 'ol/coordinate';

Also element is dom element

element: document.getElementById('domid')

how to make popover element in angular

1 Answers1