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:


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

And add NavparamService to providers



Import isNull and isNullOrUndefined

import { isNullisNullOrUndefined } from 'util';

 add navData variable, setNavData and getNavData functions:

export class NavparamService {
  constructor() { }
    this.navData = navObj;
      return 0;
    return this.navData;

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 {
    private router:Router,
    private location:Location,
    private navParamService:NavparamService
  ) {}
    console.log('btn clicked');
    let d = {
      hero:"Iron Man",
      villan: "Thanos"

<ion-header [translucent]="true">
      Send data between pages
<ion-content [fullscreen]="true">
<ion-button (click)="btnClicked()">View Object</ion-button>

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 {
    private activatedRoute:ActivatedRoute,
    private router:Router,
    private navParamService:NavparamService
  ) {
    // get data from service = navParamService.getNavData();
  ngOnInit() {

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


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

$ionic serve