Chapter 4 - Add Navigation/Routing

In the last chapter, we learned how to add a new page to our application. In this chapter, we will learn how to add navigation/routing.

1. Add route for new page

Open file “my-app\src\app\app-routing.module.ts”, you should be able t see something like:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  { path: 'my-page', loadChildren: './my-page/my-page.module#MyPagePageModule' },
];

Here is where you can add/remove/modify routes.

This line should be auto-generated when you create a new page using ionic generate page “my-page”:

{ path: 'my-page', loadChildren: './my-page/my-page.module#MyPagePageModule' }

2. Add a button for navigation

Open file “pokemon-db\src\app\home\home.page.html” and add a button fot navigation:

<ion-button [routerLink]="['/my-page']">Navigate</ion-button>

We use attribute [routerLink] to specify the route.

Star the app and now you should be able to navigate to the new page with the button on home page.

Next Chapter

In the next chapter, we will learn how to publish your App as Web App, Android App and iOS App.