Loading bootstrap selectpicker in angular2

Question

I am trying to use bootstrap selectpicker in my angular2 application. I have loaded jquery and bootstrap-select scripts in angular-cli.json.

This is my app-component.ts

 import $ from 'jquery';
  ngOnInit() {
   $('.selectpicker').selectpicker('refresh');
  }

But, I am getting this error.

__WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).selectpicker is not a function.

I am new to angular2. Please help!

you still requires the bootstrap.js for bootstrap's selectpicker — Vivek Doshi
– Vivek Doshi, Commented Aug 1, 2017 at 4:00
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/typeface-montserrat/index.css", "../node_modules/bootstrap-select/dist/css/bootstrap-select.min.css", "styles.css" ], "scripts": ["../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/bootstrap-select/dist/js/bootstrap-select.min.js" ] — PCK
– PCK, Commented Aug 1, 2017 at 4:10

thangavel .R · Accepted Answer · 2017-08-01 05:45:06Z

4

Here is my Solution,

Open typings.d.ts file in angular-cli and add the following lines

interface JQuery {
   addClass(className: string): JQuery;
   attr(attributeName: string, value: string|number): JQuery;
}
interface JQuery {
     selectpicker(options?: any, callback?: Function):any;
}

Don't import jquery instead:

declare var $:any;

answered Aug 1, 2017 at 5:45

thangavel .R

4664 silver badges14 bronze badges

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

1 Comment

PCK Over a year ago

Thank you. This worked. But could you please explain what actually is happening here?

Collectives™ on Stack Overflow

Loading bootstrap selectpicker in angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related