Dismiss the Popover in Ionic 2

Question

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy timeout set for dismissing.

  dismissPopup() {
    if (this.popover) {
      let that = this;
      setTimeout(function () {
        that.popover.dismiss();
      }, 500);
    }
  }

If I reduce the timeout to 100ms, the dismissal fails because the dom loading process is still ongoing.

However, relying on a timeout may not be the best approach. What if a user has a slow device and the time allotted is insufficient?

Can someone offer any suggestions? Should I wait for the dom to finish loading before calling dismiss? And how do I determine if the dom has loaded completely?

Thank you

javascript angular typescript ionic2 ionic3

Answer 1

Answer №1

Instead of relying on a timeout, consider utilizing Events in your application. By implementing this approach, you can trigger an event once the data is received from the server and everything is prepared, then observe this event to determine when to close the popup.

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// Initial page (emit an event when data is ready)
events.publish('loading:finished', data);

// Subsequent page (listen for the loading finished event)
events.subscribe('loading:finished', (eventData) => {
  // eventData contains parameters in an array, so extract the first argument
  console.log('Data:', eventData[0]);
});

Answer 2

Instead of relying on a timeout, consider utilizing Events in your application. By implementing this approach, you can trigger an event once the data is received from the server and everything is prepared, then observe this event to determine when to close the popup.

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// Initial page (emit an event when data is ready)
events.publish('loading:finished', data);

// Subsequent page (listen for the loading finished event)
events.subscribe('loading:finished', (eventData) => {
  // eventData contains parameters in an array, so extract the first argument
  console.log('Data:', eventData[0]);
});

Answer 3

Answer №2

To close the popover from within its view, you can use the dismiss() method on the ViewController.

  constructor(public navParams:NavParams, public navCtrl:NavController, public viewController:ViewController) {
    console.log('Hello PopOverComponent Component');
  }
  blah()
  {
  //perform some actions
    this.viewController.dismiss();
  }

Answer 4

To close the popover from within its view, you can use the dismiss() method on the ViewController.

  constructor(public navParams:NavParams, public navCtrl:NavController, public viewController:ViewController) {
    console.log('Hello PopOverComponent Component');
  }
  blah()
  {
  //perform some actions
    this.viewController.dismiss();
  }

Dismiss the Popover in Ionic 2

Answer №1

Answer №2

Similar questions

Is it possible to execute in a specific context using npm?

Why is NestJs having trouble resolving dependencies?

Tips for integrating tooltips in a dynamic highcharts chart

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Laravel vue infinite scroll failing to load additional content

Trouble displaying REACT.jsx in browser

Using angular 7 to apply a dynamic CSS class on a span element

the input parameter is not being passed to the component

Encountering an external babel register error when trying to initiate npm start

Add items to a fresh record using Mongoose and Express

After triggering an action, I am eager to make a selection from the store

Testing event emitters in node.js: a step-by-step guide

What is the best way to incorporate a custom string into an Angular application URL without disrupting its regular operation?

Managing multiple changes in input values within an object

How do I make the YouTube Grid Gallery player show up in a pop-up window?

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document

Tips for setting up Code Coverage in a Cypress environment for testing a NextJS build simultaneously

Creating a tooltip for a specific cell within an AG grid react component is a useful customization feature

How can we increase the accuracy of numerical values in PHP?

The Angular 13 interceptor is not capturing a 403 error as expected