Bootstrap-select: Using bootstrap-select with Angular 5

[move[bot]]

@davemvp commented on May 16, 2018, 3:00 AM UTC:

bootstrap-select does not work with Angular 5 built with the Angular CLI.

1. Create new application using Angular CLI using ng new

2. Using npm install jquery 1.11.3, bootstrap 3.3.7, and bootstrap-select. Install related @types using --save-dev option

3. Add the bootstrap-select.js file reference in the scripts node in the angular-cli.json file.

4. Add the snippet below to your app.component.ts file
   import * as $ from 'jquery';
...
ngOnInit(): void { $('.select-picker').selectpicker(); }

5. This will give you the following error when transpiling using ng build.

error TS2339: Property 'selectpicker' does not exist on type 'JQuery'

This is related to the following issues reported in the original bootstrap-select repository:

1648

1896

This issue was moved by caseyjhol from snapappointments/bootstrap-select-temp#58.

[move[bot]]

@majidnk01 commented on May 31, 2018, 1:16 AM UTC:

I have the same issue... problem in using bootstrap-select with Angular

Installed packages:

...
    "@angular/core": "^6.0.2",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "bootstrap": "^4.0.0",
    "bootstrap-select": "^1.13.1",
    "jquery": "3.3.1",

added

         "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
               ...
            ],

and this into style.scss

@import "../node_modules/bootstrap-select/dist/css/bootstrap-select.css";
Problem:
It works perfectly if I manually hit the URL but does not show the select if I come to URL using ng routing

Any help appreciated!

[move[bot]]

@majidnk01 commented on May 31, 2018, 8:24 AM UTC:

Okay it is resolved:

Solution:

Step 0:

npm install jquery -- save

and in _typings.d.ts_

declare var jQuery: any;

Step 1:
npm install bootstrap-select --save

Step 2:
In _angular.json_ insert script after bootstrap (if exists) and jquery (compulsory)

              "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"

Step 3:
in _style.scss_ import css (after bootsrap css if exists)

@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootstrap-select/dist/css/bootstrap-select.css";

Step 4:
In component where its going to be used:

  ngAfterViewInit() {
    document.getElementById('preloader').classList.add('hide');
    jQuery('select').selectpicker();
  }  

And done, simply use in html like below

<select class="form-control selectpicker" data-live-search="true" [formControl]="countryCode">
      <option *ngFor="let country of allCountries" title="{{country[2]}}">
          {{country[0]}} +{{country[2]}}
      </option>
</select>

Thanks bootstrap-select team for this awesome job

Regards

[dariogriffo]

For others that might not work with the above solution
I had to use ngAfterContentChecked to make it work

[vigamage]

I get (...).selectpicker is not a function error. Any help?

[vigamage]

Above solution didnt work for me. What i did was removing all the styles and scripts from angular.json and placing them on index.html. In that way, it started working fine. I am on Angular 9.

Refer this on stackoverflow.

[odmera]

Hello greetings,

I have the same problem with angular 9, but @vigamage the solution does not work for me

I get (...).selectpicker is not a function error. Any help?

[linkavich14]

Hi @odmera
I had a similar issue before, but I don't know if it is the same. Try this from stackoverflow: https://stackoverflow.com/questions/52773131/bootstrap-select-disappears-when-i-switch-to-another-page

[odmera]

Hi @linkavich14 , thank you very much this worked for me

I had to initialize the selectpicker in the ngOnInit after getting the results to load