I have a popover, that takes me to another page, where I pop back to the root page (popToRoot), reload the data/dom on an event and then dismiss the popup in the promise when the json data es back from the server. It all works fine if I have a large timeout on the dismiss.

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

If I make the timeout too low, say 100ms, it does not dismiss because the dom is still loading.

However, I don't think having a timeout is probably the best practice. What happens if someone has a slow devise, and the time is not enough?

Can anyone please make any suggestions? Should I detect when the dom has loaded, and then call dismiss? How do I check if the dom had loaded?

Thanks

I have a popover, that takes me to another page, where I pop back to the root page (popToRoot), reload the data/dom on an event and then dismiss the popup in the promise when the json data es back from the server. It all works fine if I have a large timeout on the dismiss.

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

If I make the timeout too low, say 100ms, it does not dismiss because the dom is still loading.

However, I don't think having a timeout is probably the best practice. What happens if someone has a slow devise, and the time is not enough?

Can anyone please make any suggestions? Should I detect when the dom has loaded, and then call dismiss? How do I check if the dom had loaded?

Thanks

• javascript
• angular
• typescript
• ionic2
• ionic3

• This is an old question, but could you please mark any of the answers (if it helped) as accepted so we can close it? Thanks :) – sebaferreras Commented Oct 6, 2017 at 14:44

2 Answers 2

Instead of using a timeout, you can use Events. By doing that, you can publish and event when the data es back from the server (and everything is ready) and subscribe to that event to know when you need to dismiss the popup.

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

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

// second page (listen for the loading finished event)
events.subscribe('loading:finished', (eventData) => {
  // eventData is an array of parameters, so grab our first and only arg
  console.log('Data:', eventData[0]);
});

The popover can also be dismissed from within the popover's view by calling the dismiss() method on the ViewController

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