Use Ionic 2 NavController to Manipulate App History
Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the documentation
[00:01] Unlike a traditional Angular app, Ionic apps use a NavController for handling routes and views. NavController provides a full API for working with app history, instead of relying on the browser and URLs for navigating around.
[00:15] To set up NavController, we first create a base ion nav component. Then we set a root property. The root property is a dynamic input, and we set its value to the home page component in our base class. With this, we've created an instance of NavController.
[00:31] Now, we can start calling methods on the NavController to start to navigate around our app. For example, from our home page class, we import NavController, inject it into our constructor, and then call push to navigate to a new page.
[00:49] If we want to go back programmatically, we could call pop on the NavController. We'll open up our detail page. Inside of the constructor, we'll add a set timeout.
[01:03] Inside of that, we'll call this.NavController.pop. Then we'll set the time for the timeout to two seconds.
[01:13] When we navigate to the detail page, we'll wait two seconds, and then NavController.pop will be called. We could think about the navigation stack as an array of components. Push will add a new component to the stack, and pop will remove the current component from the stack.
[01:29] Another advantage of NavController is its ability to create app history from nothing. In home.ts, instead of calling push, let's call setPages instead. Now, setPages takes an array of objects with a page property, and then an optional params property.
[01:50] For our array, we'll set a home page, then a detail page, grabbing a random user. We'll set the home page again, and then the detail page again, but with the user being passed in. Now, when we click on our item, we'll navigate to the last detail page, and then have app history to navigate back through.
[02:25] The NavController API is quite extensive, so be sure to check out the docs for all the available methods.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!