0
225
ViewsHow to pass Objects between pages in Angular?
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> {{ 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);
}
}
·
Santiago Trujillo
3 answers
Answer question0
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;
}
);
}
·
Santiago Trujillo
Report
0
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
·
Santiago Trujillo
Report
0
Here is the solution:
space-details.page.ts
ionViewDidEnter() {
this.space = this.dataService.space;
this.spaceName = this.space.spaceName;
}
·
Santiago Trujillo
Report
Answer question