Building Navigation in Ionic with Capacitor

A key component of mobile app development is navigation, which gives users an easy-to-follow route between the various displays of an application. We’ll look at how to use Capacitor to design smooth navigation in an Ionic app in this post. We’ll cover route transitions, basic navigation setup, and integrating navigation with native features.

Why Ionic + Capacitor?

Ionic and capacitors work well together to create hybrid mobile applications. Ionic offers a comprehensive UI toolkit with readily usable components, and Capacitor serves as a bridge to enable smooth communication between web-based code and native device functionality. A “write once, deploy anywhere” strategy is made possible for iOS, Android, and web by this combination

Setting Up Ionic Navigatio

Create a New Ionic App

Start by creating a new Ionic app:

ionic start navigationApp tabs --type=angular
cd navigationApp

    We’re utilizing the “tabs” template here, which has a straightforward tab-based navigation system.  Angular’s @ angular/router, which powers Ionic’s routing system, enabled a recognizable and potent routing system.

Understanding the Ionic Router

Ionic uses Angular’s Router for routing and navigation, which provides routerLink and ion-router-outlet components to manage navigation.

Define navigation links using routerLInk.

Using the current route as a guide, the router-outlet serves as a placeholder for views.

In the src/app/app-routing.module.ts file, you will notice routes defines.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

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

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Adding Pages and Routes

To add a new page:

ionic generate page details

This command creates a new folder for the details page in src/app/details, with all the necessary files. To navigate to this page, add a new route in app-routing.module.ts if it’s not automatically added:

{ path: 'details/:id', loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule) }

:id in the path is a parameter, allowing us to pass data when navigating to the details page.

Navigating Programmatically

    To navigate programmatically, inject Router from @angular/router and call its navigate method.

Home.page.ts

import { Component } from '@angular/core';

import { Router } from '@angular/router';

 

@Component({

  selector: 'app-home',

  templateUrl: './home.page.html',

  styleUrls: ['./home.page.scss'],

})

export class HomePage {

  constructor(private router: Router) {}

 

  goToDetails(id: number) {

    this.router.navigate(['/details', id]);

  }

}

Then, in your home.page.html

<ion-button (click)="goToDetails(1)">Go to Details</ion-button>

Navigating with Native Capacitot Plugins

More flexible navigation possibilities are available with Capacitor’s App and Browser plugins for native navigation.

Launching an External Web Page

A URL can be viewed in the system’s default browser by using the Browser plugins.

import { Browser } from '@capacitor/browser';
async openExternalMap() {
  await Browser.open({ url: 'https://maps.google.com' });

}

Handling App Back Button Events

On Android, you may want to handle the hardware back button differently depending on the current view. Use Capacitor’s App plugin to listen to the back button event:

Conclusion:

Ionic and Capacitor provide a flexible, powerful way to handle navigation, for page-to-page navigation and external link nagivation. With this setup, you can create a smooth, native-like navigation exprience that works seamlessly across platforms.