title: Is there an other way to include Jquery lib to communicate between Angular and this library?
body: <p>I had to include a kind of library called RappidJS and a lot of Jquery files into an Angular 7 Project.
  I used an homemade fonction to do it in my component :</p>
  
  <pre><code>ngOnInit() {
          this.loadScript('./app/assets/node_modules/jquery/dist/jquery.js');
          this.loadScript('./app/assets/node_modules/lodash/index.js');
          this.loadScript('./app/assets/node_modules/backbone/backbone.js');
          this.loadScript('./app/assets/build/rappid.min.js');
          this.loadScript('./app/assets/src/joint.ui.inspector.min.js');
          this.loadScript('./app/assets/src/joint.shapes.qad.js');
          this.loadScript('./app/assets/src/selection.js');
          this.loadScript('./app/assets/src/factory.js');
          this.loadScript('./app/assets/src/snippet.js');
          this.loadScript('./app/assets/src/app.js');
          this.loadScript('./app/assets/src/index.js');
  }
  
  public loadScript(url: string) {
      const body = &lt;HTMLDivElement&gt;document.body;
      const script = document.createElement('script');
      script.innerHTML = '';
      script.src = url;
      script.async = false;
      script.defer = true;
      body.appendChild(script);
  }
  </code></pre>
  
  <p>The JS execute fine and my app shows up without any problem. However i need to communicate with some functions in "app.js" to retrieve some json and use it into my angular app.</p>
  
  <p>In my component.html i have a toolbar :</p>
  
  <pre><code>  &lt;div id="toolbar"&gt;
              &lt;button class="btn btn-secondary add-question"&gt;Ajouter Question&lt;/button&gt;
              &lt;button class="btn btn-secondary add-answer"&gt;Ajouter Réponse&lt;/button&gt;
              &lt;button class="btn btn-secondary add-API"&gt;Ajouter module API&lt;/button&gt;
              &lt;button class="btn btn-success add-APIEX"&gt;Ajouter module Ping&lt;/button&gt;
              &lt;button class="btn send-json"&gt;Envoyer JSON&lt;/button&gt;
              &lt;button class="btn btn-secondary preview-dialog"&gt;Lancer dialogue&lt;/button&gt;
              &lt;button class="btn btn-secondary code-snippet"&gt;Code Snippet&lt;/button&gt;
              &lt;button class="btn btn-secondary clear"&gt;Effacer Tableau&lt;/button&gt;
              &lt;button class="btn btn-secondary load-example"&gt;Charger le JSON&lt;/button&gt;
          &lt;/div&gt;
  
  and in app.js i have this : 
  
  events: {
      'click #toolbar .add-question': 'addQuestion',
      'click #toolbar .add-API': 'addAPI',
      'click #toolbar .add-APIEX': 'addAPIEX',
      'click #toolbar .add-answer': 'addAnswer',
      'click #toolbar .send-json': 'sendJson',
      'click #toolbar .preview-dialog': 'previewDialog',
      'click #toolbar .code-snippet': 'showCodeSnippet',
      'click #toolbar .load-example': 'loadExample',
      'click #toolbar .clear': 'clear'
  },
  </code></pre>
  
  <p>sendJson: function() {}</p>
  
  <p>I really would like to know is there is a way to communicate between these ?</p>
  
  <p>Thanks </p>