timeOut in ionic 2

Ionic Framework ionic-v3
1

When calling this.nav.setRoot() from an Alert component, the screen tends to go blank, A work-around this is to give the app some time to load by calling timeOut(). Being new to Angular 2, I managed to make this work as follows:

createAlert() {
    let confirm = Alert.create({
        title: 'Form Completed',
        body: '<p>Form has now been completed and signed by a witness</p>',
        buttons: [{
            text: 'OK',
            handler: () => {
                this.createTimeout(300)
                .then(() => {
                    console.log(`done after 300ms delay`)
                    this.nav.setRoot(AcdSelectionPage);
                })
            }
        }]
    });
        this.nav.present(confirm);
    }
    
    createTimeout(timeout) {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(null),timeout)
        })
    }

My question is two-fold:

  1. Is there an easier way to implement the timeOut()?
  2. Is there a better way of allowing the page to load fully (without using timeOut)?
2

maybe this works --> there are lifecycle events in angular 2 --> so you can listen if your component is initialized and data-bindings are finished.

There for you can call your createAlert-function in the ngOnInit-function.

https://angular.io/docs/js/latest/api/core/OnInit-interface.html

I am not so deep in ionic 2, yet. maybe there are events like the ionicView-events in Version 1.

3

Thanks I will look into that. Just found out that my solution isn’t so grand after all - For one, the timeOut is set before trying to load a page (not during), so I’m not sure why this worked on the web browser.Still can’t call this.nav.setRoot() from an Alert component on my Android…

4

Did you find a solution? Lots of Googling comes up with lots of similar issues with navigation and alerts/actionsheets. However I am yet to find a solution that works reliably. It seems timeouts are too dependent on the device.

5

there is a solution in the api docs:
http://ionicframework.com/docs/v2/api/components/alert/Alert/

search for “Dismissing And Async Navigation”

let alert = Alert.create({
  title: 'Hello',
  buttons: [{
    text: 'Ok',
    handler: () => {
      // user has clicked the alert button
      // begin the alert's dimiss transition
      let navTransition = alert.dismiss();

      // start some async method
      someAsyncOperation().then(() => {
        // once the async operation has completed
        // then run the next nav transition after the
        // first transition has finished animating out

        navTransition.then(() => {
          // here comes your navigation action (push, pop, setRoot)
          this.nav.setRoot(XXX);
        });
      });
      return false;
    }
  }]
});

this.nav.present(alert);
1 Like
6

Fantastic thank you. This makes perfect sense. Although not quite as intuitive as it possibly could be as you have to cancel the default dismiss handler and then call dismiss. But hey I’ve learnt it now and it’s done.

The component docs I was looking at just say don’t nav from an Action Sheet.

I guess it will take a little bit of time for the out of date Google results to trickle down the search rankings :slight_smile: