pass data between pages using router in ionic explained code example

Example 1: passing data from one page to another in ionic 4

import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { DataService } from '../services/data.service';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  user = {
    name: 'Simon Grimm',
    website: 'www.ionicacademy.com',
    address: {
      zip: 48149,
      city: 'Muenster',
      country: 'DE'
    },
    interests: [
      'Ionic', 'Angular', 'YouTube', 'Sports'
    ]
  };
 
  constructor(private router: Router, private dataService: DataService) { }
 
  openDetailsWithState() {
    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }
}

Example 2: passing data from one page to another in ionic 4

ionic start academyNavigation blank --type=angular
cd academyNavigation
ionic g page details

Example 3: passing data from one page to another in ionic 4

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Details</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
<ion-card *ngIf="data">
  <ion-card-header>
    <ion-card-title>
      {{ data.name }}
    </ion-card-title>
    <ion-card-subtitle>
        {{ data.website }}
    </ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <ion-item *ngFor="let i of data.interests">
      {{ i }}
    </ion-item>
  </ion-card-content>
</ion-card>
</ion-content>

Example 4: passing data from one page to another in ionic 4

import { Component } from '@angular/core';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  user = {
    name: 'Simon Grimm',
    website: 'www.ionicacademy.com',
    address: {
      zip: 48149,
      city: 'Muenster',
      country: 'DE'
    },
    interests: [
      'Ionic', 'Angular', 'YouTube', 'Sports'
    ]
  };
 
  constructor(private router: Router) { }
 
  openDetailsWithQueryParams() {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }
}