Click outisde custom component


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

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( {
      if (!this.navCtrl.isTransitioning() && this.navCtrl.getActive()) {

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

1 Like

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