Bootstrap 4 Selectpicker Not Displaying In Angular 6

This question already asked but it wont work for me. Am using Bootstrap 4 selectpicker in my angular 6, but it is not displaying. In css it shows display: none !important; My samp

Solution 1:

Add these links in head part on index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

Add these links in after body part completed on index.html

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Add below content in app.component.html page

<selectclass="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Note: no need to add $('.selectpicker').selectpicker();

Solution 2:

You can just add this to your css:

.selectpicker {
  display: block !important;
}

Here is the the updated example: https://stackblitz.com/edit/angular-ivy-i2ozz2?file=src/app/app.component.css

Since you are developing in Angular, I would suggest you to check @ng-select/ng-select package. It has so many useful features, and you can just install a package and use it.

Package: https://www.npmjs.com/package/@ng-select/ng-select

Here is the working example: https://stackblitz.com/edit/angular-fauxb2?file=src/multi-select-hidden-example.component.html