The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Navigation and Routing

Next ►
►

In this section, we will explore how to navigate between different pages in an Ionic application and how to set up routing to manage the navigation flow. Understanding navigation and routing is crucial for building dynamic and user-friendly applications.

Key Concepts

  1. Navigation: The process of moving between different pages or views in an application.
  2. Routing: The mechanism that maps URLs to specific pages or components in the application.

Setting Up Navigation and Routing

  1. Creating Pages

First, let's create a couple of pages to navigate between. Use the Ionic CLI to generate new pages:

ionic generate page Home
ionic generate page About

This will create two new pages: HomePage and AboutPage.

  1. Configuring Routes

Next, we need to configure the routes in our application. Open the src/app/app-routing.module.ts file and define the routes:

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: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutPageModule)
  }
];

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

  1. Navigating Between Pages

To navigate between pages, we use the NavController service provided by Ionic. Inject NavController into your component and use its navigateForward method to navigate to a different page.

Example: Navigating from Home to About

In src/app/home/home.page.ts:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {

  constructor(private navCtrl: NavController) { }

  goToAbout() {
    this.navCtrl.navigateForward('/about');
  }
}

In src/app/home/home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="goToAbout()">Go to About Page</ion-button>
</ion-content>

  1. Using Router Links

Alternatively, you can use Angular's routerLink directive to navigate between pages without writing any TypeScript code.

In src/app/home/home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button routerLink="/about">Go to About Page</ion-button>
</ion-content>

  1. Passing Data Between Pages

You can pass data between pages using the state property of the NavController.

Example: Passing Data from Home to About

In src/app/home/home.page.ts:

goToAbout() {
  this.navCtrl.navigateForward('/about', {
    state: {
      data: 'Hello from Home Page'
    }
  });
}

In src/app/about/about.page.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-about',
  templateUrl: './about.page.html',
  styleUrls: ['./about.page.scss'],
})
export class AboutPage implements OnInit {

  data: any;

  constructor(private router: Router) {
    if (this.router.getCurrentNavigation().extras.state) {
      this.data = this.router.getCurrentNavigation().extras.state.data;
    }
  }

  ngOnInit() {
  }
}

In src/app/about/about.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>{{ data }}</p>
</ion-content>

Practical Exercise

Task

  1. Create a new page called Contact.
  2. Add a button on the Home page that navigates to the Contact page.
  3. Pass a message from the Home page to the Contact page and display it on the Contact page.

Solution

  1. Generate the Contact page:
ionic generate page Contact
  1. Add the route for the Contact page in app-routing.module.ts:
{
  path: 'contact',
  loadChildren: () => import('./contact/contact.module').then(m => m.ContactPageModule)
}
  1. Update home.page.ts to navigate to the Contact page with a message:
goToContact() {
  this.navCtrl.navigateForward('/contact', {
    state: {
      message: 'Hello from Home Page'
    }
  });
}
  1. Update home.page.html to add the button:
<ion-button (click)="goToContact()">Go to Contact Page</ion-button>
  1. Update contact.page.ts to receive and display the message:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {

  message: string;

  constructor(private router: Router) {
    if (this.router.getCurrentNavigation().extras.state) {
      this.message = this.router.getCurrentNavigation().extras.state.message;
    }
  }

  ngOnInit() {
  }
}
  1. Update contact.page.html to display the message:
<ion-header>
  <ion-toolbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>{{ message }}</p>
</ion-content>

Summary

In this section, we covered the basics of navigation and routing in Ionic. We learned how to create pages, configure routes, navigate between pages using NavController, and pass data between pages. These concepts are fundamental for building a dynamic and interactive Ionic application. In the next section, we will explore tabs and side menus to enhance the navigation experience further.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved