I'm aware that Angular removes the script tags in the ponent.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 ontologyponent.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/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/widgets/jquery.ncbo.tree-2.0.2.js"></script>

I'm aware that Angular removes the script tags in the ponent.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.ponent.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./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/widgets/jquery.ncbo.tree-2.0.2.js"></script>

• javascript
• html
• angular
• typescript
• angular-ponents

• 1 You will very likely experience issues trying to use Angular with jQuery. It is remended you find angular patible modules so that you can ensure they can hook into the Angular ponent lifecycle and rendering. – Alexander Staroselsky Commented Oct 11, 2018 at 19:34

1 Answer 1

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>