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!

click on any element will bubble up to the document and `document:click` will be trigerred — Max Koretskyi, Aug 03 '17 at 18:54
This current code does not work? Your test comp is part of the document — Huangism, Aug 03 '17 at 18:57
The problem is I have an event.propagation() setup on the parent dom element so it won't bubble. — Jwqq, Aug 03 '17 at 19:00
Isn't it just binding a click to the component itself and then call `toggleComponent()`? — Huangism, Aug 03 '17 at 19:08

Ulysse BN · Accepted Answer · 2020-10-06T11:16:32.663

11

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()

edited Oct 06 '20 at 11:16

answered Aug 03 '17 at 18:55

Ulysse BN

10,116
7
54
82

Thanks but I need to trigger a document click, not a click from an element. +1 – Jwqq Aug 03 '17 at 18:59
@Jwqq then you can _click_ on body html element. See my updated answer :) – Ulysse BN Aug 03 '17 at 19:01

How to trigger click event manually?

1 Answers1

Linked