Bootstrap w/ Angular "Error: $(...).collapse() is not a function"

Question

I'm new to Bootstrap and trying to activate the .collapse() function from Javascript in an Angular controller when a user clicks on a link. This should close the collapsible navbar when one of the links is clicked (because the routing is controlled by Angular and doesn't cause a page refresh).

The following error shows:

ERROR TypeError: $(...).collapse is not a function
    at HTMLAnchorElement.<anonymous> (header.component.ts:18)
    at HTMLAnchorElement.dispatch (jquery.js:5183)
    at HTMLAnchorElement.elemData.handle (jquery.js:4991)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLAnchorElement.globalZoneAwareCallback (zone.js:1577)

Relevant part of HTML template:

<div class='collapse navbar-collapse' id='mainNavbar'>
  <div class='navbar-nav'>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "Home" }'>
      <a class='nav-link' routerLink='/'>Home</a>
    </div>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "Request" }'>
      <a class='nav-link' routerLink='/request'>Request</a>
    </div>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "Volunteer" }'>
      <a class='nav-link' routerLink='/volunteer'>Volunteer</a>
    </div>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "About" }'>
      <a class='nav-link' routerLink='/about'>About</a>
    </div>
  </div>
</div>

Relevant part of controller:

// importing jquery from npm module
import * as $ from 'jquery';

// inside the controller class
ngOnInit() {
  $('.nav-link').click(() => $('.collapse').collapse('toggle'));
}

Included scripts (in .angular-cli.json):

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

I've seen multiple questions just like this, but almost always the answers say to make sure jQuery is included before Bootstrap, and that Bootstrap is not included twice. Neither is the case here.

Other jQuery functionality (normal collapse functionality) is working properly. And the same error comes up if I try to do use the .dropdown() function on dropdowns.

What is the issue here?

If you need: Angular 5, Bootstrap v4.0.0 (npm module), jQuery v3.3.1 (npm module)

Hmmm. Why was this immediately downvoted? Was I not thorough? — Jonathan Lam
– Jonathan Lam, Commented Apr 13, 2018 at 16:23
What if, instead of your import, you try declare let $: any ? — David
– David, Commented Apr 13, 2018 at 16:52
I assume that if you import jquery as $, it means that $ will only contain the code defiend in the jquery package, and not the additional plugins declared by bootstrap. If you use declare let ..., then $ represents the normal jQuery function PLUS the additional plugins — David
– David, Commented Apr 13, 2018 at 16:55

Jonathan Lam · Accepted Answer · 2018-12-30 16:08:13Z

9

You need to use declare let $ : any; instead of your import

I assume that if you use

import jquery as $ from 'jquery';

then it means that $ will only contain the code defined in the jquery package, and not the additional plugins declared by bootstrap (or by any other jquery plugins).

If you use

declare let $ : any;

then $ represents the normal jQuery function PLUS the additional plugins (collapse, dropdown, ...) added by other libraries

If you don't want to use any, and you need to explicitely call some plugin methods, you need to extend jQuery's interface

interface JQuery 
{
    carousel(options : any);
}

declare let $: JQuery;

Note if you can avoid it, you should avoid using jquery or jquery plugins when a native angular approach is available

For boostrap, like ConnorsFan mentionned, you can use ng-bootstrap as a replacement. It requires bootstrap's CSS file, but dynamic components have been rewritten in native angular, without the need of jQuery

edited Dec 30, 2018 at 16:08

Jonathan Lam

17.5k17 gold badges72 silver badges99 bronze badges

answered Apr 13, 2018 at 17:24

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

krsna Over a year ago

Perfect explanation. Worked flawlessly.

Jonathan Lam · Accepted Answer · 2018-04-13 16:52:37Z

2

After more research, I found this Stack Overflow answer that suggested adding the following line (replacing the import * as $ from 'jquery'):

declare let $: any;

Unfortunately, I don't understand what this means or how it works, but it fixed the problem for me. Hope this helps someone.

answered Apr 13, 2018 at 16:52

Jonathan Lam

17.5k17 gold badges72 silver badges99 bronze badges

3 Comments

Yanis-git Over a year ago

you answer to yourself to quickly, i have prepare this sample for you, if you want to add it to your own answer. stackblitz.com/edit/angular-hhf14h?file=app%2Fapp.component.ts

Jonathan Lam Over a year ago

@Yanis-git Thanks for the example!

Yanis-git Over a year ago

Unfortunately i am not able, on the second button in my sample, i activate real toggle, is just opening dropdown then nothing.

Miguel Carvalhais Matos · Accepted Answer · 2019-10-21 16:05:22Z

1

Use:

declare let $ : any;

Instead of:

import * as $ from 'jquery';

As a workaround you can use:

$('#yourId').removeClass('show');

(for others users)

Assure that you have the settings on angular.json like on the question:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]

answered Oct 21, 2019 at 16:05

Miguel Carvalhais Matos

1,1632 gold badges13 silver badges23 bronze badges

Comments

Aswathi Chandran · Accepted Answer · 2019-11-20 10:29:38Z

1

This worked for me

import * as $ from 'jquery';
declare var $:any;

In angular.json

"styles": [
          "src/styles.css",
          "node_modules/bootstrap3/dist/css/bootstrap.min.css",
          "node_modules/ngx-toastr/toastr.css"
        ],
"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap3/dist/js/bootstrap.js"
        ]

Now you can use collapse in angular 7

 $(".panel-collapse").collapse("hide");

answered Nov 20, 2019 at 10:29

Aswathi Chandran

315 bronze badges

Comments

zmanc · Accepted Answer · 2018-04-13 17:37:55Z

0

When you are inside an Angular application there is no need for jQuery. You can use local variables instead. There is actually a very good example of how to do this in this stackblitz

answered Apr 13, 2018 at 17:37

zmanc

5,45314 gold badges53 silver badges91 bronze badges

4 Comments

Jonathan Lam Over a year ago

I know it's not necessary to use jQuery, but Bootstrap already requires jQuery to be loaded. I thought I might as well use the jQuery convenience functions instead of implementing it myself in Angular.

zmanc Over a year ago

When pulling bootstrap into an Angular application it would be better to use ngx-bootstrap or ng-bootstrap rather than the native jQuery functionality. Using jQuery will cause issues for you in the long term as it takes you outside of the visibility of Angular and has the potential to cause unintended side effects.

zmanc Over a year ago

I use bootstrap with all of my Angular projects, I pull the styles in via SCSS in the main stylesheet of the application, from there I use ngx-bootstrap to provide the functionality of my bootstrap components.

Jonathan Lam Over a year ago

Ok, thanks. I'll keep that in consideration in the future.

Collectives™ on Stack Overflow

Bootstrap w/ Angular "Error: $(...).collapse() is not a function"

5 Answers 5

1 Comment

3 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related