CODEWITHSUNDEEP
angulartypescriptbootstrap-4multi-selectbootstrap-multiselect
Ramesh S
Ramesh S

Reputation: 661

Bootstrap Multiselect not working in Angular 6

Am trying to impletement Bootstrap Multiselect Reference in my Angular 6 project.

But It is not working https://stackblitz.com/edit/angular-ivy-g1nnof?file=src%2Findex.html

My code below:

angular.json

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/sg-bootstrap/themes/standard/css/sg-bootstrap-standard.min.css",
    "node_modules/ag-grid-community/dist/styles/ag-grid.css",
    "node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css",
    "node_modules/ezweb-customization/min/agGrid-standard.min.css",
    "node_modules/font-awesome/css/font-awesome.min.css",
    "src/styles/fontawesome/css/fontawesome-all.css",
    "src/styles/styles.scss",
    "src/styles/menu.css",
    "src/styles/general.css",
    "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
],
"scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

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 -->
      <script src="https://shared.sgmarkets.com/widgets/sgwt-widget-polyfills/sgwt-widget-polyfill-webcomponent.js"></script>
      <script defer src="https://shared.sgmarkets.com/widgets/sgwt-super-header/v2/sgwt-super-header.js"></script>
      <script defer src="https://shared.sgmarkets.com/widgets/sgwt-mini-footer/v2/sgwt-mini-footer.js"></script>
      <script defer src="https://shared.sgmarkets.com/widgets/sgwt-help-center/v2/sgwt-help-center.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script>
         if ('serviceWorker' in navigator && location.hostname !== 'localhost') {
           navigator.serviceWorker.register('ngsw-worker.js').then(function() {
             console.log('Service Worker registered');
           }).catch(function(err) {
             console.log('Service Worker registration failed: ', err);
           });
         }
      </script>
      <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" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.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.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>

It is not given expected design. Please help me to solve this issue. May be this question already asked but that is not solve my issue.

Note: I don't have permission to install node modules through npm that's why I'm using jQuery plugin Thanks in advance!

Upvotes: 0

Views: 471

Answers (0)

Related Questions