Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Navigation Between Page Components

Explore navigation methods in Ionic applications using Angular routing. Understand how to implement navigation between page components through template-level links and programmatic routing within component classes using navigateByUrl and navigate methods. Gain practical knowledge to manage page transitions and pass URL parameters effectively.

We'll cover the following...

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):

HTML
<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 ...