Bootstrap-select: Using Bootstrap-select with Angular 2

[AngularTx]

We are building an application using Angular 2 which will run on IE browser. Because of the drop down issues which we see on the IE browser, we would like to have this package used in our application.

We are not using any jquery code in our application. Will this package be suitable for this req?

I would like to have the same select functionality of drop down without jquery , (like display default selected value ) . but with the interface which bootstrap-select is providing.

Can this be achieved with this package.

[AngularTx]

Any one who can help here ?

[urbanhusky]

First line on this repository:

Bootstrap-select is a jQuery plugin […]

So, no, you cannot use bootstrap-select without jQuery. But, if you want to show a default selection, be sure to bind the [(ngModel)] to a property/field that is initialised with a default value. If you want placeholders, you can achieve that by adding an <option> that is disabled and hidden, like such:

<option [value]="" disabled selected>Something&hellip;>…
<option [ngValue]="defaultValue" disabled selected>Something&hellip;>…

That's not a perfect solution and you miss out on the styling, live search etc. that bootstrap-select offers.

P.S.: The JS part of Bootstrap is also built on jQuery.

[shubhamsinghal]

I have added jquery file in my code to make bootstrap work, but I am not using jquery in my code. Will it work?
in my angular2 project, I am using webpack and I have added following code:

module.exports=(env)=>{
. . .
. . .},
entry: {
  vendor: [
   '@angular/common',
   '@angular/compiler',
  '@angular/core',
    . . .
   'bootstrap',
   'bootstrap/dist/css/bootstrap.css',
   'Jquery',
   'bootstrap-select',
   'bootstrap-select/dist/css/bootstrap-select.css',
  ]
},
output: {
...
}

It is not working

Can anybody help?

[jhenrich]

I have added jquery file in my code to make bootstrap work, but I am not using jquery in my code. Will it work?

How did you managed to get bootstrap working without adding jquery? Or do you just mean the bootstrap style is applied to your application?

If you are using webpack and want to use jquery try to use the webpack.ProvidePlugin method like this:
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]

Then you can use jquery in your typescript files:
import * as $ from 'jquery';

[BearandYoon]

I am using bootstrap-select in my angular 4 project.
I imported "bootstrap": "3.3.7", "bootstrap-select": "^1.12.4", "jquery": "3.2.1" but it doesn't display.
Can anybody help me?

[yp2211]

I declare selectpicker in ~.d.ts like this:
interface JQuery {
...
selectpicker(options?: any, callback?: Function): JQuery;
}

and it works.
=======packages============
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
"@types/jquery": "^3.2.6",
"bootstrap": "^3.3.7",
"bootstrap-select": "^1.12.4",

[fmalh3iro]

@yp2211 Hi,
You can show me how you implemented it, because when I import the bootstrap-select gives me the following error

"NodeInvocationException: Prerendering failed because of error: TypeError: Can not read property 'select' of undefined"

The error points to the following code in the main-server.js:

$.valHooks.select.set = function(elem, value) {
    if (value && !valHooks.useDefault) $(elem).data('selected', true);

    return valHooks._set.apply(this, arguments);
  };

[bDino]

Im facing the same problem. It shows the options after I open the modal window, close it and open it up again. So on second open it shows the options

[gaurgs]

@yp2211 can you please elaborate your answer and where to find this ~.d.ts file in angular cli project?