#Angular 5 + Bootstrap + Popper - Popover does not work.

20 messages · Page 1 of 1 (latest)

wary bridge
#

Angular 5 + Bootstrap + Popper - Popover does not work.

ember creek
#

You should be using an Angular-ized version of Bootstrap.

#

My advice is to undo/uninstall whatever you have done and follow the instructions on:
https://ng-bootstrap.github.io/#/getting-started
or
https://valor-software.com/ngx-bootstrap/#/documentation#getting-started
Your choice. They are very similar. They will install what you need to use Bootstrap in your Angular app. Including the JS components

ng-bootstrap
Angular powered Bootstrap

Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, datepicker, dropdown, offcanvas, pagination, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead

Angular Bootstrap

Bootstrap 5 Bootstrap 4 and Bootstrap 3 widgets for Angular: accordion, alerts, buttons, carousel, collapse, datepicker, dropdowns, modals, pagination, popover, progressbar, rating, sortable, tabs, timepicker, tooltip, typeahead

wary bridge
#

Thank you Rob for answering!. Yes, there is ngx-bootstrap. I just wanted to learn what I am doing wrong since it should be possible in theory to get it working without relying on 3rd party library? Or did angular 5 prevent this? I am fully aware of the drawback of the way I am doing it now. Just learning/experimenting. 🙂

ember creek
#

I completely ignored that you are using Angular 5. That is an ancient, dead, and unsupported version. I doubt Bootstrap v5 (which is where I mentally shifted the "5" to) would even work. But you are going to have to become an archeologist to figure out what was the setup for back in 2017

wary bridge
#

My mistake Rob. I am confused. Bootstrap: 5. Angular: 14.2.6 😉

#

Sorry for wasting your time. I will continue to try to break this code to my will. To then delete it and use ngx-bootstrap.

ember creek
#

I have no idea what your situation is now. 🙂
My advice is to close this post, then post a new question that has an accurate description of your problem.

wary bridge
#

I did try: 'npm install @popperjs/core'. But according to bootstrap documentation "You must include popper.min.js before bootstrap.js, or use one bootstrap.bundle.min.js which contains Popper." So I am using the bootstrap.bundle.min.js which should have popper with it.

ember creek
#

ngx-bootstrap already handles that

#

Because ngx-bootstrap doesn't need popperjs. So you don't need to install it.

#

I think in npm v8 it likely will get installed as a peerDependency, but you won't actually use it so it will just be taking up space

wary bridge
#

Yeah, sorry. Just frustrating. When I open the code example in blitzstack, it works without any dependencies. When I literally copy the code from blitz to a fresh and empty angular project, it does not work. I would link the blitzstack url but that not possible for some reason.

#

I give up for now and use to library.

ember creek
#

What code? This is all very confusing. an empty angular project except for ngx-bootstrap you mean?

wary bridge
#

https://getbootstrap.com/docs/5.2/components/popovers/#live-demo This is the code I am trying to implement. You can click on the thunderbolt and it opens the code in stackblitz. edit: <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

#

If you look into stackblitz, you see they use bare minimum.

#

So I was looking at how it was working in stackblitz to maybe get a clue of what I was doing wrong. And copying code from stackblitz (which I knows work) to an empty angular project in the hope to get it working like that.

wary bridge
#

I managed to solve it! I did not initialize the popovers properly in ngOnInit(). Documentation: "Popovers are opt-in for performance reasons, so you must initialize them yourself."