Popover + Angular + Bootstrap 4.3 Failure

Question

I am trying to use the sample code popover element from the getbootstrap site.

Environment: Angular 8.0.0 JQuery 3.4.1 Popper.js 1.15.0 Bootstrap 4.3.1 ToolTip 1.6.1

angular.json I have loaded the scripts

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/popper.min.js",
  "node_modules/tooltip/dist/Tooltip.js",
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]

},

style.css

@import "~bootstrap/dist/css/bootstrap.css";

index.html

<script>
  $(function () {
    $('[data-toggle="popover"]').popover()
  })
</script>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<script>
  $(function () {
    $('[data-toggle="popover"]').popover()
  })
</script>

Bootstrap styling seems to work fine, but sample tooltip and popovers do not.

Even when I load the with the CDN method, I cant seem to get these to work.

There are no compile errors and the scripts[] from angular.json seems to be working
When I run a jquery test in index.html, I'm told it's not running. Clearly I dont understand what angular.json scripts[] directive is providing. Is there something else I should be adding to make the libraries available?
When I load via CDN, I get the following error in the console:

Uncaught Error: TOOLTIP: Option "sanitizeFn" provided type "window" but expected type "(null|function)"

It looks like there's an Angular Popper library which doesn't need jQuery - https://www.npmjs.com/package/angular-popper — JMK, Jun 05 '19 at 14:52
Really you should pull in an angularified bootstrap library. Using jquery like this is messy within angular as the page lifecycle is not the same - have a look here if you want to use jquery events with angular rendered buttons etc. https://stackoverflow.com/questions/42124360/how-to-make-this-jquery-event-handler-in-angular-2 — dmoo, Jun 05 '19 at 16:00
Ah, ok. The documentation I have been reading has not been super clear on that point. That makes sense. I was afraid that mixing the angular npm angular module and the ng-bootstrap module would cause conflicts. But this makes sense. I will try this and report back. Thank you for the advise. — Ahack, Jun 05 '19 at 18:43
@dmoo Thank you again for the advice. What I learned was that there are 2 competing versions of Angularized-Bootstrap modules. I chose to go with ngx-bootstrap. Loading the CSS from the mainstream bootstrap library combined with loading the ngx-bootstrap module for angular has solved my issues and makes setup a lot less messy, since I do not need to worry about loading javascript libraries. Thanks again! — Ahack, Jun 05 '19 at 19:35
I have the same issue after upgrading Angular 7 to Angular 8. It was working perfectly in Angular 7. Still not fixed. — Sinju Angajan, Jun 10 '19 at 07:21

score 5 · Answer 1 · answered Jun 11 '19 at 07:20

I had the same issue with tooltip. A possible workaround is to define a sanitize function and set sanitize to false to avoid this function to be called.

My code before

jQuery(this.elementRef.nativeElement).tooltip({placement: place, trigger: 'hover'});

The working function with Angular 8

jQuery(this.elementRef.nativeElement).tooltip({
   placement: place, trigger: 'hover', sanitize: false, sanitizeFn: content => content
});

score 1 · Answer 2 · answered Nov 19 '19 at 17:07

I had the same problem, This helped me , check It.

https://getbootstrap.com/docs/4.3/getting-started/javascript/#util

You only need define "sanitizeFn" property of tooltip when you load tooltip function, you can do the following:

$('[data-toggle="tooltip"]').tooltip({
    sanitizeFn: function (content) {return content;}
});

Popover + Angular + Bootstrap 4.3 Failure

2 Answers2