Navigation

In the previous chapter, we saw a basic implementation of navigation between two pages. In this section, we will dig deeper into the same.

To start off, we will scaffold a blank Ionic app. Create a new folder named chapter4 and, inside that folder, open a new command prompt/terminal and run the following:

ionic start -a "Example 9" -i app.example.nine example9 blank --v2

Once the app has been scaffolded, cd into the example9 folder. If we navigate to example9/src/app/app.component.ts, we should see the App component defined by a class named MyApp. And if we navigate to the corresponding template example9/src/app/app.html, we should see the ion-nav component.

The ion-nav component takes in an input property named root. The root property indicates which component will act as the root component/root page. In this example, we have indicated Home Page as the root from our MyApp class (example9/src/app/app.component.ts).

Now we are going to generate one new page named about, using the Ionic...