Angular 2 - communication of typescript functions with external js libraries
<p>Using <a href="https://philogb.github.io/jit/" rel="noreferrer">Javascript Infovis Toolkit</a> as an external library for drawing graph and trees. I need to manipulate the onClick method of nodes in order to asynchronously sending an HTTP GET request to the server and assign the data that comes from server to the properties and variables of an Angular service class. By Using webpack for packing all the compiled typescripts to a single js file, the output file is confusing and unreadable. so calling a function which is in the compiled js file from an external js library, is not the best solution clearly.</p>

<p>I try the following solution inside my Angular service so I can access to the properties of this service without any trouble:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function () {
  
  var nodes = document.querySelectorAll(".nodes"); // nodes = []
  
  for (var i = 0; i &lt; nodes.length; i++) { // nodes.length = 0
    
    nodes[i].addEventListener("click", function () {
      
      // asynchronously sending GET request to the server
      // and assing receiving data to the properties of this Angular service
      
    });
  }

});</code></pre>
</div>
</div>
</p>

<p>However, this solution doesn't work because in Javascript Infovis Toolkit the nodes are drawn after finishing rendering of DOM and also after <code>window.onload</code> event. This library has some lifecycle methods such as onAfterCompute() which is called after drawing tree is completed. How can I trigger a global event to inform the Angular service that the drawing of tree is completed and it can query all of the nodes?</p>