Using script tag in Angular 6 component.html

I'm aware that Angular removes the script tags in the component.html files, but from all the different forums I've checked out, I haven't found one to successfully solve my problem. I'm trying to put this code into my ontology.component.html file

<script>
  var widget_tree = $("#widget_tree").NCBOTree({
     apikey: "<my-api-key>",
     ontology: "ENVO"
  });
</script>

My index.html already has the necessary scripts as well

<link rel="stylesheet" type="text/css" href="../src/widgets/jquery.ncbo.tree.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/widgets/jquery.ncbo.tree-2.0.2.js"></script>

1 answer

  • answered 2018-10-11 19:30 Vivek Kumar

    if you are using angular6 then you can place it inside the script[] section of angular.json file or for angular 4/5 filename is .angular-cli

    "scripts": [
        "path/to/scripts/file1.js",
        "path/to/scripts/file2.js"
    ]
    

    Your below coce might not be working because at that time, "#widget_tree" node is not been created in DOM, just try to add these code in some setTimeout()

    <script>
      var widget_tree = $("#widget_tree").NCBOTree({
         apikey: "<my-api-key>",
         ontology: "ENVO"
      });
    </script>
    

    like

        <script>
        function injectAPIKey() {
            setTimeout(function() {
              var widget_tree = $("#widget_tree").NCBOTree({
                 apikey: "<my-api-key>",
                 ontology: "ENVO"
              });
            }, 10000);
        }
    
    injectAPIKey();
    
    </script>