title: angular 5 bootstrap-select: selectpicker is not a function
body: <p>I wanted to install <strong>npm bootstrap-select</strong> for angular 5 application 
  So I installed it using npm</p>
  
  <pre><code>npm install bootstrap-select
  </code></pre>
  
  <p>Then I installed required dependencies:</p>
  
  <pre><code>npm install jquery
  npm install popper.js --save
  </code></pre>
  
  <p>angular-cli.json:</p>
  
  <pre><code> "apps": [
      {
        "styles": [
          "styles.css"
        ],
        "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ],
      }
    ],
  </code></pre>
  
  <p>and my package.json is (I removed some packages from a list):</p>
  
  <pre><code>"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",
  }
  </code></pre>
  
  <p>In html file, I added code:</p>
  
  <pre><code>&lt;ng-template #modalWindow let-c="close" let-d="dismiss"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title"&gt;Options&lt;/h4&gt;
      &lt;button type="button" class="close" aria-label="Close" (click)="d('Cross click')"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="modal-body"&gt;     
      &lt;select id="myspID" #selectPickerRef class="selectpicker form-control" multiple
          title="Select a number"&gt;
        &lt;option&gt;Opt1&lt;/option&gt;
        &lt;option&gt;Opt2&lt;/option&gt;
        &lt;option&gt;Opt3&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-light" (click)="c('Close click')"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Added select element is not styled, it looks like a simple bordered rectangle with listed options. It is not even a dropdown.</p>
  
  <p>And here is a angular component element:</p>
  
  <pre><code>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();  //&lt;--error is thrown here
    }
  
    openWindowCustomClass(params) {
  
      this.modalService.open(this.modalWindowRef, {
        windowClass: 'dark-modal',
        centered: true,
        size: 'lg'
      });
      this.runBootstrapSelects();
    }
  }
  </code></pre>
  
  <p>There is an error:</p>
  
  <pre><code>$(...).selectpicker is not a function
  </code></pre>
  
  <p>inside <code>runBootstrapSelects()</code> component method.
  <br/>
  <br/>
  <strong>EDIT:</strong>
  <br/>
  <strong>angular-cli.json and angular component files content have been added.</strong><br/>
  <br/>
  If I add:
  @import "~bootstrap-select/dist/css/bootstrap-select.css";
  to style.css file:</p>
  
  <pre><code>@import "~bootstrap/dist/css/bootstrap.css";
  @import "~bootstrap-select/dist/css/bootstrap-select.css";
  </code></pre>
  
  <p>then <code>&lt;select&gt;</code> item is not shown on a page
  <br/>
  <br/>
  But a file: <strong>/node_modules/bootstrap-select/tests/bootstrap4.html</strong> which is included to bootstrap-select node_modules folder works. Bootstrap4.html file contains bootstrap-select dropdowns which are shown styled.</p>