Check out example codes for "passing data from one page to another in ionic 4". It will help you in understanding the concepts better.

Code Example 1

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
 
  data: any;
 
  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.data = this.router.getCurrentNavigation().extras.state.user;
      }
    });
  }
 
  ngOnInit() { }
}

Code Example 2

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

Code Example 3

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class DataService {
 
  private data = [];
 
  constructor() { }
 
  setData(id, data) {
    this.data[id] = data;
  }
 
  getData(id) {
    return this.data[id];
  }
}

Code Example 4

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Data Navigation
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <ion-button expand="full" (click)="openDetailsWithQueryParams()">
    Open with Query Params
  </ion-button>
 
  <ion-button expand="full" (click)="openDetailsWithService()">
    Open with Service
  </ion-button>
 
  <ion-button expand="full" (click)="openDetailsWithState()">
    Open with State
  </ion-button>
</ion-content>

Code Example 5

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
 
  data: any;
 
  constructor(private route: ActivatedRoute, private router: Router) {
 
  }
 
  ngOnInit() {
    if (this.route.snapshot.data['special']) {
      this.data = this.route.snapshot.data['special'];
    }
  }
}

Code Example 6

ionic g service services/data
ionic g service resolver/dataResolver

Code Example 7

<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>

Code Example 8

import { Component } from '@angular/core';
import { Router } 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) { }
 
  openDetailsWithService() {
    this.dataService.setData(42, this.user);
    this.router.navigateByUrl('/details/42');
  }
}

Code Example 9

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
 
  data: any;
 
  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (params && params.special) {
        this.data = JSON.parse(params.special);
      }
    });
  }
 
}

Code Example 10

import { DataResolverService } from './resolver/data-resolver.service';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'details', loadChildren: './details/details.module#DetailsPageModule' },
  {
    path: 'details/:id',
    resolve: {
      special: DataResolverService
    },
    loadChildren: './details/details.module#DetailsPageModule'
  }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Learn ReactJs, React Native from akashmittal.com