Bootstrap 4 selectpicker not displaying in angular 6 - html

Question

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 sample code:
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select class="selectpicker" multiple data-live-search="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
demo https://stackblitz.com/edit/angular-ivy-pmyy6e?file=src%2Fapp%2Fapp.component.html

Answer 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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="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
<select class="selectpicker" multiple data-selected-text-format="count">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Note: no need to add $('.selectpicker').selectpicker();

Answer 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