How to dismiss loading overlay component

[ramon]

Hi,

I have a list in my ionic2 typescript application. When a list item is clicked I run the following code:

let loading = Loading.create({
    content: 'Opening detail page...',
    dismissOnPageChange: false // I don't want to dismiss on page change
});
this.nav.present(loading).then(() => {
    this.nav.push(DetailPage,{id: id}); // nav to detail page
});

Next, on my DetailPage I want to do something like this:

ionViewDidEnter() {
    // 3.5 seconds timeout
    setTimeout(() => {
        loading.dismiss();
    }, 3500); 
}

Obviously, this produces an error:

EXCEPTION: ReferenceError: loading is not defined

How can I do that?

Thanks and sorry for my bad english.

There is a related topic:

Loading not dismiss

I’m trying to present a Loading on the app RootNav and then dismiss it from another Page, I tried to store the created loading in a Promise which return from the Show() function, but still when there is more than one Loading presented , some of them are not dismissed. any way to detected if the top most view of the nav is loading and dismiss it? I’m using beta6 , any idea ? Trying to get some sort of singleton service as ionic1 $loading service… // Show show(): Promise<Loading> { …

[bengtler]

your detail page doesn’t know anything about your loading overlay

you could create a service which shares the loading instance so you can inject the service in your detail page and dismiss it.

or you make something like that:

this.nav.push(DetailPage,{id: id, loading: loading});

and call loading dismiss through navParams.get(‘loading’).dismiss()

[ramon]

I had not thought about do it that way. It works well.

Thanks for your quick reply @bengtler !