jqueryangularbootstrap-4multi-selectangular-lifecycle-hooks

Dynamically load external javascript file not working in angular 6

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:

enter image description here

Please help on this am new in angular 6. This question maybe already asked but that is not solve my issue.

Thanks in advance.

Solution

  • I've imported the libraries like you did from that website but only changed jquery.

      <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css"
    type="text/css">
  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-example.min.css"
    type="text/css">
  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/prettify.min.css"
    type="text/css">
  <link rel="stylesheet"
    href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">


  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script type="text/javascript"
    src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
  <script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js">
  </script>

  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css">
  <script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

    Here's the stackblitz

    Inside an ngb-modal: stackblitz