Navigation Between Page Components

Learn how to implement navigation between Ionic page components in two ways.

With Angular Routing, we can implement navigation between separate page components in our applications in two ways:

  1. Directly within the component template itself
  2. Using the router module within the component class

Navigation at the template level

Handling navigation at the template level is relatively simple, as demonstrated with the following code snippet (routing-specific code is highlighted):

Press + to interact
<ion-list>
  <ion-item *ngFor="let item of items">
    <ion-button color="primary"
      size="large"
      fill="solid"
      href="home/{{ item.link }}"
      routerDirection="forward">{{ item.title }}
    </ion-button>
  </ion-item> 
</ion-list>

Here, we use a standard href attribute on line 6 to create a regular HTML hyperlink between pages, followed by the addition of the routerDirection attribute.

The routerDirection attribute on line 7 helps the router outlet “understand” which direction the navigation takes so that page ...

Get hands-on with 1400+ tech skills courses.