title: Angular2 show/hide dropdown in ngFor, and hide when clicked anywhere else?
body: <p>I know this question has been probably asked thousand of times, but I couldn't find any correct solution for angular2.</p>
  
  <p>So I have a table and I'm setting data for each row that I'm getting from a server. Hence I have an <code>ngFor</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;table class="table table-hover mb-0 hidden-sm-down table-curved"&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let module of modules; let index = index" #moduleObject &gt;
        &lt;td class="text-center"&gt;&lt;md-checkbox&gt;&lt;/md-checkbox&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;a class="test" (click)="module._clicked = !module._clicked"&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu table-dropdown" role="menu" [ngClass]="{'table-dropdown-open' : module._clicked}"&gt;
              &lt;li&gt;&lt;a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)"&gt;Edit Module&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a (click)="removeModule(module.Code)" &gt;Remove Module&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So each row will look like this:
  <a href="https://i.stack.imgur.com/twpuQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/twpuQ.jpg" alt="enter image description here"></a></p>
  
  <p>And I have a toggle function that when you click on the 3 dots, it shows a dropdown box, like so:</p>
  
  <p><a href="https://i.stack.imgur.com/RNTSp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RNTSp.jpg" alt="enter image description here"></a></p>
  
  <p>But the toggle function has two issues which I honestly have no Idea how to fix:</p>
  
  <p>1 - When you click on the 3 dots, it works for the first two clicks, and after that when you click on another row's 3 dots it won't work (meaning you have to double click in order to show the dropdown.</p>
  
  <p>2 - Currently my toggle effect is only happening when I have to click on the 3 dots, but I want to achieve that when the user clicks on another rows' 3 dots, the drop down thats shown anywhere else hides. And when the user clicks anywhere else, it also hides the rest dropdown.</p>
  
  <p>The 2nd was tough for me, so I have a very inefficient way of hiding the dropdown.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>CloseAllDropDown() {
    //console.log(a)
    var dropdown = document.getElementsByClassName('table')[0].querySelectorAll('ul');
    for (let i = 0; i &lt; dropdown.length; ++i) {
      document.getElementsByClassName('table-dropdown-open')[0].classList.remove('tabl‌​e-dropdown-open');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How Can I achieve the two lists above?</p>
  
  <h1>Update</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;tbody&gt;
    &lt;tr *ngFor="let module of modules; let index = index" #moduleObject &gt;
      &lt;td class="text-center"&gt;&lt;md-checkbox&gt;&lt;/md-checkbox&gt;&lt;/td&gt;
      &lt;td (clickOutside)="visible = false"&gt;
        &lt;a class="test" (click)="module._clicked = !module._clicked"&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu table-dropdown" role="menu" [ngClass]="{ 'table-dropdown-open' : module._clicked }" &gt;
          &lt;li&gt;&lt;a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)"&gt;Edit Module&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a (click)="removeModule(module.Code)" &gt;Remove Module&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;</code></pre>
  </div>
  </div>
  </p>