title: How to open dropdown menu onclick using javascript in angular
body: <p>I am trying to implement drop down menu items on click using javascript without using jquery in angular</p>
  
  <p>I tried creating seperate javascript file and specified the file path in script in angular json file. 
  It is not working. What are the other ways to do this?</p>
  
  <pre><code>&lt;div class="tab-dropdown"&gt;
                    &lt;div id="dropdown" (click)="dropClick()"&gt;Open Dropdown&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;ul class="nav" role="tablist" id="navdrop"&gt;
                    &lt;li class="nav-item"&gt;
                       &lt;a class="nav-link active" href="#all" role="tab" data-toggle="tab" onclick="addprevtext()"&gt;All&lt;/a&gt;
                    &lt;/li&gt; --&gt;
                    &lt;li class="nav-item "&gt;
                       &lt;a class="nav-link " href="#social" role="tab" data-toggle="tab" onclick="addprevtext()"&gt;HR&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                       &lt;a class="nav-link" href="#digital" role="tab" data-toggle="tab"
                          onclick="addprevtext()"&gt;Marketing
                       &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                       &lt;a class="nav-link" href="#crm" role="tab" data-toggle="tab" onclick="changetext()"&gt;Customer Service&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                       &lt;a class="nav-link" href="#ticketing" role="tab" data-toggle="tab"
                          onclick="changetext()"&gt;Operations&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                       &lt;a class="nav-link" href="#coreSystem" role="tab" data-toggle="tab" onclick="changetext()"&gt;Insurance&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                       &lt;a class="nav-link" href="#dms" role="tab" data-toggle="tab" onclick="changetext()"&gt;Financial Services&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#manu" role="tab" data-toggle="tab" onclick="changetext()"&gt;Manufacturing
                             &lt;/a&gt;
                       &lt;/li&gt;
                       &lt;li class="nav-item"&gt;
                             &lt;a class="nav-link" href="#health" role="tab" data-toggle="tab" onclick="changetext()"&gt;Healthcare &amp; Pharma
  
                                &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                                &lt;a class="nav-link" href="#it" role="tab" data-toggle="tab" onclick="changetext()"&gt;IT
  
                                   &lt;/a&gt;
                             &lt;/li&gt;
  
                 &lt;/ul&gt;
  </code></pre>
  
  <p>js File </p>
  
  <pre><code>function showDropdown() {
  document.getElementById("dropdown").onclick = function() {myFunction()};
  
  function myFunction() {
    document.getElementById("navdrop").classList.toggle("show");
  }
  }
  </code></pre>
  
  <p>ts file</p>
  
  <pre><code>dropClick() {
      showDropdown();
  
    }
  </code></pre>
  
  <p>Drop down menu should open on clicking</p>
  
  <p>Here's an MCVE: <a href="https://stackblitz.com/edit/angular-wrmrvu" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-wrmrvu</a></p>