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

AngularJS | Validate input values to ensure they fall within acceptable range for both arrow and user input types

Top tips for data manipulation

Leveraging jsonp with nodejs and original ajax

What is preventing me from accessing the variable?

Having to reinstall node modules is a repetitive task that must be done after each build of an Angular

Implement styling based on user input - Transmit form data via PHP to designated email address

What is the reason behind using 'dummy' local variables to define return object keys?

Knockout Observable Array causing UI to freeze and not refresh properly

Personalize your message in a JavaScript alert using Bootstrap notifications

Exploring Angular 6 CLI Workspaces: A Guide to Creating Libraries for Exporting Services

Transmitting JSON AJAX response to populate location markers on Google Maps

Sending a POST request in Node.js and Express may result in the request body being empty or undefined

Is there a solution for resolving the Element Implicitness and Lack of Index Signature Error?

Is it possible to utilize ko.observableArray in the form of a map?

Differentiating between mouseenter and tap events: What's the key?

Issue with CSV download box not showing up on Rails version 2.3.11

Developing Vue applications with dynamic component insertion

How to remove a specific type from a generic type in Typescript without using Exclude<>?

Invisible and Unrestricted automatic playback

Creating a seamless thread using AngularJS