How to include JQuery plugins in Angular 2?

Question

i installed jquery plugin in angular 2 project Link

npm i jquery-bootstrap-scrolling-tabs

and add in .angular-cli.json

 "styles": [
        "styles.css",
        "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
         "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.js"
      ],

and i declare the veritable typings.d.ts

declare var scrollingTabs:any;

using in app.component.ts

ngAfterViewInit() {
    $('.nav-tabs').scrollingTabs({
      scrollToTabEdge: true  
    });
  }

error: TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).scrollingTabs is not a function

Rahul Singh · Accepted Answer · 2017-09-04 06:04:16Z

2

you forgot to add the jquery variable

declare var $ : any

For more info on how to add jquery use this LINK with and without typings

answered Sep 4, 2017 at 6:04

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

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

2 Comments

sridharan Over a year ago

added still not working. scrollingTabs is not a function

Rahul Singh Over a year ago

i would suggest you to use view child and add the template reference to the function instead of the class, tell me if you need a example

Aman Jain · Accepted Answer · 2017-09-04 06:12:44Z

1

Import jquery in your component file.

declare let $ : any

answered Sep 4, 2017 at 6:12

Aman Jain

2,6521 gold badge19 silver badges24 bronze badges

1 Comment

Rahul Singh Over a year ago

any difference from what i added 9 minutes ago

Collectives™ on Stack Overflow

How to include JQuery plugins in Angular 2?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related