How to trigger click event manually?

Question

I am trying to trigger a document click programatically.

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.

@Component({
  selector: 'test-comp',
  template: `<div *ngIf="showMe">stuff</div> 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;
  }

I am not sure how to fire a document click programmatically inside my toggleComponent method. Is there a way to do it? Thanks a lot!

Solution

You can trigger a click event on any element by using HTMLElement.click():

document.getElementById('myEl').click() // or the hacky id reference `myEl.click()`

You can't click on document since it is not a rendered element. But you can click on the whole body:

document.body.click()