- Forums
- ionic
- IONIC - Simple Example To Pass URL Parameter To Pages
This is a simple short tutorial to show how to use IONIC and Angular router to pass URL GET parameters from pages to other pages [4839], Last Updated: Mon Jun 24, 2024
ionic-teacher
Sat Jul 04, 2020
1 Comments
9841 Visits
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>
please use this more time
i am so happy to meet