how to close popover on click of anywhere on the doccument

Question

i have a popover which i want to close on click of anywhere on document

here is my demo: https://stackblitz.com/edit/ionic-3bw7da?file=pages%2Fhome%2Fhome.html

right now it is not closing as i don't know how to close it.

here is my demo:https://stackblitz.com/edit/ionic-3bw7da?file=pages%2Fhome%2Fhome.html

please help me thanks in advance!!!

Answer 1

I answered a similar question, you have to add a listener to your component, thanks to the host property. Inject ElementRef in your constructor called "element" in this example.

constructor(private element: ElementRef)

@Component({
     selector..., 
     host: {'(document:click)': 'onClick($event)',}
});


onClick(event) {
if (!this.element.nativeElement.contains(event.target)) {
      closeModal(); // or not
    }
}

I answered the question here : Angular, resume event propagation

Answer 2

I did not succeed to format my code in a comment :/

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  host:{'(document:click)': 'onClick($event)',
}
})

export class HomePage {

    constructor(public navCtrl: NavController, private element: ElementRef) {

  }

  onClick(event) {
   // display event in console if outside of menu top bar
   if (this.element.nativeElement.contains(event.target)) {
     console.log(event);
     this.closeMenu();    
   } else {
    this.openMenu();    
   }

  openMenu() {
    this.showMoreBarItem = !this.showMoreBarItem;      
  }

  closeMenu() {
    if(this.showMoreBarItem) {
      this.showMoreBarItem = !this.showMoreBarItem;      
    }
  }}

IMPORTANT : You have to separate your menu component to accomplish it, and only apply my changes in your menu component => in your case create a new component in home.html for instance !