Using script tag in Angular 6 component.html

Question

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>

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

Vivek Kumar · Accepted Answer · 2018-10-11 19:38:54Z

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>

edited Oct 11, 2018 at 19:38

answered Oct 11, 2018 at 19:30

Vivek Kumar

5,1109 gold badges55 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Staroselsky Over a year ago

This is exactly why you should avoid using jQuery with dynamically rendered Angular components. jQuery has no way of knowing when Angular components have finished rendering and if the elements/components re-render event handlers or similar will be lost.

Collectives™ on Stack Overflow

Using script tag in Angular 6 component.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related