CODEWITHSUNDEEP
angularionic-frameworkionic2
binoculars
binoculars

Reputation: 2274

NavCtrl: keep page in cache after it's popped

On the home page of my app, I navigate to another page using: this.navCtrl.push(Page2);

When I click the "back" button on Page2 to go back to the home page, and then navigate back to Page2, I notice that ionViewDidLoad() is called again, meaning Page2 wasn't in the cache anymore.

I guess this is because Page2 was on top of the stack, and is then removed from the stack.

Is there a way to keep the current state of the page? On Page2, there's a progress bar and I want the user to be able to see the progress when he uses the back button and navigates back to the page. The progress bar can't be reset

Upvotes: 0

Views: 286

Answers (1)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

That's not possible as you've said, when you navigate back the view is destroyed. What you can do is create a custom component that will hold the progress bar.

  • You'll initialize the component in your home page so it'll be in the bottom of the stack and will only be destroyed if the app closes.
  • In your page2 you'll call the function to initialize the progress bar, this function need to be in the component.
  • Since Ionic stacks page over page, you'll need to use some css on your component, like position: absolute; top: 0; left: 0; width: 100%; heigth: 100%; z-index: 9999, and if you need to hide, just have a boolean variable that you set as true false and apply css with ngClass.

If you need to understand how custom components are created, follow this tutorial by Josh Morony

Hope it helps :)

Upvotes: 1

Related Questions