How to pass Objects between pages in Angular?

Question

I am trying to pass Objects between pages in my Ionic Angular app. Unfortunately, I could not figure out how to do that yet. The Object gets passed to the newly opened "details" page once. However, when going back to the initial "home" page the Objects are not getting passed anymore.

Anyone an idea how to fix that?

Here is the code:

home.page.html


<ion-content>
  <div *ngIf="spaces">
    <ion-item-sliding *ngFor="let space of spaces | async;">
      <ion-item
        (click)="openspacedetailsPage(space)"
        routerDirection="forward"
        detail
      >
        <ion-icon name="ellipse-outline" start></ion-icon>
        <ion-label> &nbsp; {{ space.spaceName }} </ion-label>
      </ion-item>
    </ion-item-sliding>
  </div>

home.page.ts

  openspacedetailsPage(space) {
    this.dataService.setSpace(space);
    this.router.navigate(["tabs/space-details"]);
  }

data.service.ts

  setSpace(space) {
    this.space = space;
  }

space-details.page.ts

  ngOnInit() {
    this.space = this.dataService.space;
    this.spaceName = this.space.spaceName
  }

  pageBack() {
    this.space = {};
    this.userId = "";
    this.spaceId = "";
    this.spaceName = "";
    this.dataService.setSpace(undefined);
  }
}

Just guessing... but probably the issue is that the page is not destroyed, and therefore oninit is not called again. You probably want `ionViewWillEnter` or `ionViewDidEnter` lifecycle hooks. — AT82, Dec 16 '21 at 17:25

score 1 · Answer 1 · answered Dec 17 '21 at 08:57

You could use QueryParms to achieve that. home.page.ts

  openspacedetailsPage(space) {
    this.dataService.setSpace(space);
    this.router.navigate(["tabs/space-details"],{queryParams: {space}});
  }

space-details.page.ts

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
  ngOnInit() {
        this.route.queryParams
          .subscribe(params => {
            console.log(params); 
            this.space = params.space;
              }
        );
      }

score 1 · Answer 2 · answered Dec 18 '21 at 17:39

1

Here is the way to pass the object by using query parameter approach. For detailed information kindly check the link below.

https://ionicacademy.com/pass-data-angular-router-ionic-4

answered Dec 18 '21 at 17:39

Muhammad Ayyaz

11
1
14

score 0 · Accepted Answer · answered Dec 16 '21 at 22:02

0

Here is the solution:

space-details.page.ts

 ionViewDidEnter() {
    this.space = this.dataService.space;
    this.spaceName = this.space.spaceName;
  }

answered Dec 16 '21 at 22:02

vlntn

350
5
23

How to pass Objects between pages in Angular?

3 Answers3

Linked