title: External JS file click event is not working in angular 8
body: <p>I am learning Angular 8 and I came across one issue. I have downloaded one HTML template and I am integrating that template to angular.</p>
  <p>While clicking on button. It is expanding and displaying menus.</p>
  <p><a href="https://i.stack.imgur.com/0hnb7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hnb7.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/f4m95.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f4m95.png" alt="enter image description here" /></a></p>
  <p>I have js file in assets folder scripts.js. And that scripts.js file contains jquery code to open and close this menu. But after adding html code to html of my component file this click event is not working. When I am checking source in browser I can see scripts.js is loaded in browser. But I am not sure why it is not calling click event. Below is html code for click event.</p>
  <pre><code>&lt;div class=&quot;header-close&quot;&gt;
              &lt;svg viewBox=&quot;0 0 100 25&quot;&gt;
                  &lt;path id=&quot;curve_close&quot; fill=&quot;#B4E3F2&quot; d=&quot;M100, 25 C62.5, 25, 62.5, 25, 50, 25 S37.5, 25, 25, 25&quot;
                          data-start-d=&quot;M100, 25 C62.5, 25, 62.5, 25, 50, 25 S37.5, 25, 25, 25&quot;
                          data-end-d=&quot;M100, 25 C62.5, 25, 62.5, 0,  50, 0  S37.5, 25, 0,  25&quot;/&gt;
              &lt;/svg&gt;
              &lt;a href=&quot;javascript:;&quot; id=&quot;menu-close&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div class=&quot;header-tool&quot;&gt;
              &lt;div class=&quot;entry-tool&quot;&gt;
  
                  &lt;svg viewBox=&quot;0 0 100 25&quot;&gt;
                      &lt;path id=&quot;curve_open&quot; fill=&quot;#B2E2F2&quot; d=&quot;M0, 0 C37.5, 0, 37.5, 25, 50, 25 S62.5, 0, 100, 0&quot;
                          data-start-d=&quot;M0, 0 C37.5, 0, 37.5, 25, 50, 25 S62.5, 0, 100, 0&quot;
                          data-end-d=&quot;M0, 0 C37.5, 0, 37.5, 0, 50, 0 S62.5, 0, 100, 0&quot; /&gt;
                  &lt;/svg&gt;
                  &lt;a href=&quot;javascript:;&quot; id=&quot;menu-handler&quot;&gt;&lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>ID for my anchor tag is <strong>menu-handler</strong>. and code written in scripts.js is as below.</p>
  <pre><code>    // Menu event handler
  var toggleMenu = function(close_menu){
      $('#header').find('.entry-header').toggleClass('show-menu');
      $('#header').find('.entry-header').slideToggle();
  
      $('#menu-handler').hide();
      $('#menu-close').hide();
      setTimeout(function(){
          if( close_menu ){ $('#menu-handler').fadeIn(); }
          else{ $('#menu-close').fadeIn(); }
      }, 800);
  };
  
  $('#menu-handler').on('click', function(){
  toggleMenu(false);
  
      TweenMax.to($('#curve_open'), 0.4, {attr: {'d': $('#curve_open').data('end-d')}});
      setTimeout(function(){
          $('.header-close').show();
          $('.header-tool').hide();
          TweenMax.to($('#curve_close'), 0.4, {attr: {'d': $('#curve_close').data('end-d')}});
      }, 400);
  });
  </code></pre>
  <p>I am also not getting any error while click on button. I am not sure can we call external js functions directly from component html pages? or I have to use angular events like (click) and then call this.</p>