To pass an object between pages, lets use a service. First start with a blank project.

$ionic start blankApp blank --type=angular

change to the newly created directory to go to your new project

$cd blankApp

Next step is to generate a menu page

$ionic generate page menu

Now lets generate a service called navparam

$ionic generate service navparam

All you have to do now is start adding the code to each file:

app.module.ts

import { NavparamService } from './navparam.service';

And add NavparamService to providers

 

navparam.service.ts

Import isNull and isNullOrUndefined

import { isNull, isNullOrUndefined } from 'util';

 add navData variable, setNavData and getNavData functions:


export class NavparamService {
  navData:any;
  constructor() { }
  setNavData(navObj){
    this.navData = navObj;
  }
  getNavData(){
    if(isNullOrUndefined(this.navData))
      return 0;
    return this.navData;
  }
}

 

home.page.ts

Import NavparamService

import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { NavparamService } from '../navparam.service';

 Add the following decorators to the HomePage constructor:

export class HomePage {
  constructor(
    private router:Router,
    private location:Location,
    private navParamService:NavparamService
  ) {}
  btnClicked(){
    console.log('btn clicked');
    let d = {
      hero:"Iron Man",
      villan: "Thanos"
    }
    this.navParamService.setNavData(d);
    this.router.navigate(['menu/'])
  }
}

 

home.page.html

<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()">View Object</ion-button>
</ion-content>

 

menu.page.ts

import NavparamService and add the router decorators to the constructors and assign the the data to our object variable

import { ActivatedRoute,Router } from '@angular/router';
import { NavparamService } from '../navparam.service';

 add the router decorators, set our data variable and assign the data from the getNavData() function in the service.

 
export class MenuPage implements OnInit {
  data:any;
  constructor(
    private activatedRoute:ActivatedRoute,
    private router:Router,
    private navParamService:NavparamService
  ) {
    // get data from service
    this.data = navParamService.getNavData();
   }
  ngOnInit() {
  }
}

 

menu.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Menu Page</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
Hero: {{data.hero}}<br>
Villan: {{data.villan}}
<p>Thanks for checking out this tutorial. Check other tutorials as <a href="https://www.webune.com/forums" target="_blank">Webune Forums</a>  </p>
</ion-content>

 

now you can start the application to see it in action!

$ionic serve

 

 

 

IONIC - Simple Example To Pass URL Parameter To Pages