title: How to trigger click event manually?
body: <p>I am trying to trigger a document click programatically. </p>
  
  <p>My test-comp are shown in multiple places in a page and I want to hide them all when the test-comp is clicked or a document click is fired.</p>
  
  <pre><code>@Component({
    selector: 'test-comp',
    template: `&lt;div *ngIf="showMe"&gt;stuff&lt;/div&gt; and more…`
  })
  
  export class TestComponent {
    showMenu: boolean;
  
    constructor(public elementRef: ElementRef) {
    }
  
    @HostListener('document:click', ['$event'])
    documentClick(event: MouseEvent) {
      //hide my component when there is a document click    
       this.toggleComponent();
    }
  
    toggleComponent() {
      // I am trying to programmatically fire a document click here to hide all test-comp if the test-comp   
      // component itself is clicked
      // this.elementRef.nativeElement will select all test-comp component but not sure what to do next
      this.showMe = !this.showMe;
    }
  </code></pre>
  
  <p>I am not sure how to fire a document click programmatically inside my <code>toggleComponent</code> method. Is there a way to do it? Thanks a lot!</p>