Click outisde custom component

Hello!

Have any1 tried to catch click events outside component ?

So far i have tried to use this

  1. Adding old way listener (to document, body, ion-app, window neither of them works)

     constructor(public el: ElementRef, public renderer: Renderer) {
         document.body.addEventListener('click', (event) => {
             this.onClick(event, false);
         });
     }
    
  2. Adding listener to host inside Component metadata

     host: {
        '(document:click)': 'onClick($event)',
     }
    
  3. Using Hostlistener

     @HostListener('click') onClick(event, false) {
        console.log(event);
     }
    

But the result is always the same

Google chrome catches the clicks outside my component, but when i emulate or run in device, the event only fires up when i click on my component.

Is there a known issue or workaround ?

I do it this way in my project with no problems.

  @ViewChild('special') special: ElementRef
  @HostListener('document:click', ['$event'])
  andClickEvent(event) { 
    if (!this.special.nativeElement.contains(event.target)) {
      if (!this.navCtrl.isTransitioning() && this.navCtrl.getActive()) {
        this.close()
      }
    }
  }

I wrap the entire component in a span that is marked with #special

1 Like

Hey!
Thanks for reply.
Do you have a repo example of this approach ?
Thanks in advance!

Sorry, don’t have a repo for it.
It’s just like I said and you wrap the entire page component with a tag like this

<span #special>

I went through the same problem. Renderer2 did not work on native APPs.

This is the solution I’ve found : angular - How to detect outside clicks in ionic native APPs? - Stack Overflow