angular 5 bootstrap-select: selectpicker is not a function

Question

I wanted to install npm bootstrap-select for angular 5 application So I installed it using npm

npm install bootstrap-select

Then I installed required dependencies:

npm install jquery
npm install popper.js --save

angular-cli.json:

 "apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ],
    }
  ],

and my package.json is (I removed some packages from a list):

"dependencies": { 
    (...)
    "@ng-bootstrap/ng-bootstrap": "^1.1.0",
    "bootstrap": "^4.1.1",
    "bootstrap-select": "^1.13.2",
    "jquery": "^3.3.1",
    "ng-multiselect-dropdown": "^0.2.1",
    "popper.js": "^1.14.4",
}

In html file, I added code:

<ng-template #modalWindow let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Options</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">     
    <select id="myspID" #selectPickerRef class="selectpicker form-control" multiple
        title="Select a number">
      <option>Opt1</option>
      <option>Opt2</option>
      <option>Opt3</option>
    </select>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

Added select element is not styled, it looks like a simple bordered rectangle with listed options. It is not even a dropdown.

And here is a angular component element:

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import * as $ from 'jquery';

@Component({
  selector: 'app-modal-model-generator',
  templateUrl: './modal-model-generator.component.html',
  styleUrls: ['./modal-model-generator.component.css']
})
export class ModalModelGeneratorComponent implements OnInit {

  closeResult: string;

  @ViewChild('modalWindow')
  modalWindowRef: HTMLElement;

  @ViewChild('selectPickerRef')
  selectPickerEL: any;

  constructor(
    private modalService: NgbModal
  ) {}

  runBootstrapSelects(): void {
    //this.selectPickerEL.selectpicker();
    //$('.selectpicker').selectpicker();
    //$('select').selectpicker();
    $('#myspID').selectpicker();  //<--error is thrown here
  }

  openWindowCustomClass(params) {

    this.modalService.open(this.modalWindowRef, {
      windowClass: 'dark-modal',
      centered: true,
      size: 'lg'
    });
    this.runBootstrapSelects();
  }
}

There is an error:

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

inside runBootstrapSelects() component method.

EDIT:
angular-cli.json and angular component files content have been added.

If I add: @import "~bootstrap-select/dist/css/bootstrap-select.css"; to style.css file:

@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-select/dist/css/bootstrap-select.css";

then <select> item is not shown on a page

But a file: /node_modules/bootstrap-select/tests/bootstrap4.html which is included to bootstrap-select node_modules folder works. Bootstrap4.html file contains bootstrap-select dropdowns which are shown styled.

Have u found an answer for this?

vigamage
– vigamage

2020-07-15 15:23:04 +00:00
Commented Jul 15, 2020 at 15:23 — vigamage
– vigamage, Commented Jul 15, 2020 at 15:23

Karthik · Accepted Answer · 2018-09-14 12:20:34Z

1

Yes because it works only when you are calling that plugin class "selectpicker" using jquery conditon.Make sure you are calling that element class name or element name in jquery condition.

// To style only selects with the selectpicker class

$('.selectpicker').selectpicker();

          (or)

// To style all selects

$('select').selectpicker();

answered Sep 14, 2018 at 12:20

Karthik

112 bronze badges

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

3 Comments

ael Over a year ago

I have updated component and html files content. selectpicker() cause an error $(...).selectpicker is not a function

Karthik Over a year ago

first of all, Make sure that you declared $ var in the component to access the jquery. Initialize the selectpicker function inside the ngAfterViewInit() { }

ael Over a year ago

regarding to 'declared $ var', yes, there is such line already there: import * as $ from 'jquery';. But I can't initialize selectpicker inside ngAfterViewInit function, because select html element is not found. Instead of initialize the select html element inside the ngAfterViewInit method, I initialize it when modal window is open: openWindowCustomClass(params) { (...) this.runBootstrapSelects(); } . If I try to initialize inside ngAfterViewInit, jquery will not fint element: $('#myspID'). But inside openWindowCustomClass() { this.runBootstrapSelects(); } jquery finds el.

Collectives™ on Stack Overflow

angular 5 bootstrap-select: selectpicker is not a function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related