title: How to close dropdown when click outside anywhere on screen in Angular 4
body: <p>I am adding a "open" class on click to open the dropdown menu. I am isOpen as boolean to toggle open and close on click. its working fine.PROBLEM is dropdown menu does not close when I click outside (anywhere on screen).it only open and close when click on button. 
  here is the code:</p>
  
  <pre><code>********************
        HTML
  ********************
  
  &lt;div class="btn-group dropdown" [class.open]="isOpen"&gt;
     &lt;button class="btn btn-default dropdown-toggle area-dropdown" (click)="onDropdownToggle()"&gt;
     &lt;span class="eo-select-label ellipsis"&gt; Select area size&lt;/span&gt;
     &lt;span aria-hidden="true" class="caret glyphicon&gt;&lt;/span&gt;
     &lt;/button&gt;
   &lt;ul class="eo-dropdown-menu"&gt;
      &lt;li class="li-employee-number-selector"&gt; 5 - 50 Square meters &lt;/li&gt;
      &lt;li class="li-employee-number-selector"&gt; 51 - 100 Square meters &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  
  ********************
       Component.ts
  ********************
  
      export class SellerFactoryProfileComponent implements OnInit {
        isOpen: boolean;
  
      constructor() { }
  
        ngOnInit() {
        }
        onDropdownToggle() {
          this.isOpen = !this.isOpen;
      }
  </code></pre>