I am using Angular 6, am trying to add Bootstrap Multiselect in my project. But here am facing some issue bootstrap-multiselect.js not loading in page.
So am tying to add dynamically add this bootstrap-multiselect.js file, but it is not loading please help me on this
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>loading</my-app>
<!-- Inclusion of sgwt widgets -->
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
<!-- Multiselect code -->
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example-getting-started').multiselect({
includeSelectAllOption: false,
enableFiltering: true,
includeFilterClearBtn: false,
enableCaseInsensitiveFiltering : true,
});
});
</script>
<!-- Multiselect code -->
</html>
app.component.ts
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ngOnInit() {
this.loadScript('http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
}
public loadScript(url: string) {
const body = <HTMLDivElement> document.body;
const script = document.createElement('script');
script.innerHTML = '';
script.src = url;
script.async = false;
script.defer = true;
body.appendChild(script);
}
}
app.component.html
<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
Still it is showing like this:
Please help on this am new in
angular 6. This question maybe already asked but that is not solve my issue.
Thanks in advance.
I've imported the libraries like you did from that website but only changed jquery.
Here's the stackblitz
Inside an ngb-modal: stackblitz