passing data from one page to another in ionic 4

1import { Component, OnInit } from '@angular/core';
2import { ActivatedRoute, Router } from '@angular/router';
3 
4@Component({
5  selector: 'app-details',
6  templateUrl: './details.page.html',
7  styleUrls: ['./details.page.scss'],
8})
9export class DetailsPage implements OnInit {
10 
11  data: any;
12 
13  constructor(private route: ActivatedRoute, private router: Router) {
14    this.route.queryParams.subscribe(params => {
15      if (this.router.getCurrentNavigation().extras.state) {
16        this.data = this.router.getCurrentNavigation().extras.state.user;
17      }
18    });
19  }
20 
21  ngOnInit() { }
22}
23

1import { Component } from '@angular/core';
2import { Router, NavigationExtras } from '@angular/router';
3import { DataService } from '../services/data.service';
4 
5@Component({
6  selector: 'app-home',
7  templateUrl: 'home.page.html',
8  styleUrls: ['home.page.scss'],
9})
10export class HomePage {
11 
12  user = {
13    name: 'Simon Grimm',
14    website: 'www.ionicacademy.com',
15    address: {
16      zip: 48149,
17      city: 'Muenster',
18      country: 'DE'
19    },
20    interests: [
21      'Ionic', 'Angular', 'YouTube', 'Sports'
22    ]
23  };
24 
25  constructor(private router: Router, private dataService: DataService) { }
26 
27  openDetailsWithState() {
28    let navigationExtras: NavigationExtras = {
29      state: {
30        user: this.user
31      }
32    };
33    this.router.navigate(['details'], navigationExtras);
34  }
35}
36

1import { DataResolverService } from './resolver/data-resolver.service';
2import { NgModule } from '@angular/core';
3import { Routes, RouterModule } from '@angular/router';
4 
5const routes: Routes = [
6  { path: '', redirectTo: 'home', pathMatch: 'full' },
7  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
8  { path: 'details', loadChildren: './details/details.module#DetailsPageModule' },
9  {
10    path: 'details/:id',
11    resolve: {
12      special: DataResolverService
13    },
14    loadChildren: './details/details.module#DetailsPageModule'
15  }
16];
17 
18@NgModule({
19  imports: [RouterModule.forRoot(routes)],
20  exports: [RouterModule]
21})
22export class AppRoutingModule { }
23

1ionic start academyNavigation blank --type=angular
2cd academyNavigation
3ionic g page details
4

1ionic g service services/data
2ionic g service resolver/dataResolver
3

1<ion-header>
2  <ion-toolbar>
3    <ion-buttons slot="start">
4      <ion-back-button defaultHref="/"></ion-back-button>
5    </ion-buttons>
6    <ion-title>Details</ion-title>
7  </ion-toolbar>
8</ion-header>
9 
10<ion-content padding>
11<ion-card *ngIf="data">
12  <ion-card-header>
13    <ion-card-title>
14      {{ data.name }}
15    </ion-card-title>
16    <ion-card-subtitle>
17        {{ data.website }}
18    </ion-card-subtitle>
19  </ion-card-header>
20  <ion-card-content>
21    <ion-item *ngFor="let i of data.interests">
22      {{ i }}
23    </ion-item>
24  </ion-card-content>
25</ion-card>
26</ion-content>
27

1import { Component } from '@angular/core';
2import { Router } from '@angular/router';
3import { DataService } from '../services/data.service';
4 
5@Component({
6  selector: 'app-home',
7  templateUrl: 'home.page.html',
8  styleUrls: ['home.page.scss'],
9})
10export class HomePage {
11 
12  user = {
13    name: 'Simon Grimm',
14    website: 'www.ionicacademy.com',
15    address: {
16      zip: 48149,
17      city: 'Muenster',
18      country: 'DE'
19    },
20    interests: [
21      'Ionic', 'Angular', 'YouTube', 'Sports'
22    ]
23  };
24 
25  constructor(private router: Router, private dataService: DataService) { }
26 
27  openDetailsWithService() {
28    this.dataService.setData(42, this.user);
29    this.router.navigateByUrl('/details/42');
30  }
31}
32

1import { Component } from '@angular/core';
2import { Router } from '@angular/router';
3 
4@Component({
5  selector: 'app-home',
6  templateUrl: 'home.page.html',
7  styleUrls: ['home.page.scss'],
8})
9export class HomePage {
10 
11  user = {
12    name: 'Simon Grimm',
13    website: 'www.ionicacademy.com',
14    address: {
15      zip: 48149,
16      city: 'Muenster',
17      country: 'DE'
18    },
19    interests: [
20      'Ionic', 'Angular', 'YouTube', 'Sports'
21    ]
22  };
23 
24  constructor(private router: Router) { }
25 
26  openDetailsWithQueryParams() {
27    let navigationExtras: NavigationExtras = {
28      queryParams: {
29        special: JSON.stringify(this.user)
30      }
31    };
32    this.router.navigate(['details'], navigationExtras);
33  }
34}
35

1import { Injectable } from '@angular/core';
2 
3@Injectable({
4  providedIn: 'root'
5})
6export class DataService {
7 
8  private data = [];
9 
10  constructor() { }
11 
12  setData(id, data) {
13    this.data[id] = data;
14  }
15 
16  getData(id) {
17    return this.data[id];
18  }
19}
20

1import { DataService } from './../services/data.service';
2import { Injectable } from '@angular/core';
3import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
4 
5@Injectable({
6  providedIn: 'root'
7})
8export class DataResolverService implements Resolve<any> {
9 
10  constructor(private dataService: DataService) { }
11 
12  resolve(route: ActivatedRouteSnapshot) {
13    let id = route.paramMap.get('id');
14    return this.dataService.getData(id);
15  }
16}
17