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

Share Improve this question Follow edited Oct 11, 2018 at 19:30 msanford 12.3k1313 gold badges7171 silver badges9898 bronze badges asked Oct 11, 2018 at 19:23 Bryan BastidaBryan Bastida 3311 gold badge44 silver badges99 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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>