Please Follow these steps to create an app where you can pass the URL parameters from one page into another page using the router features in Angular IONIC.

First, Start with a new blank project. For example:

ionic start blankApp blank --type=angular --capacitor

Once you have a blank project, generate a menu page

ionic generate page menu

OK, now all you have do to is add the following HTML code to each of the following pages:

 

app.routing.module.ts

Import the following:

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

 

    path: 'menu/:xyz',
    loadChildren: () => import('./menu/menu.module').then( m => m.MenuPageModule)

 

home.page.ts

Import the following:

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

 

add them to your constructor and create a btnClicked() function, so now your HomePage class will look like this:

export class HomePage {
  constructor(
    private router:Router,
    private location:Location
  ) {}
  btnClicked(){
    console.log('btn clicked')
    this.router.navigate(['menu/2'])
  }
}

 

home.page.html

Add a click me button

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Send data between pages
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button (click)="btnClicked()">Click Me</ion-button>
</ion-content>

 

menu.page.ts

import the following:

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

Edit the MenuPage class to look like this. We are simply getting the value of URL parameter which is two that was set back in the home.page.ts

export class MenuPage implements OnInit {
  data:any;
  constructor(
    private activatedRoute:ActivatedRoute
  ) {
    // get the data from the URL
    this.activatedRoute.paramMap.subscribe(
      (data) => {
        console.log(data)
      }
    );
      this.data = this.activatedRoute.snapshot.paramMap.get('xyz');
   }
  ngOnInit() {
  }
}

 

menu.page.html

Add a back button and display the URL parameter

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Menu</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<h1>Data = {{data}}</h1>
</ion-content>
Ionic - Simple Example To Pass Data Using A Service