Trying to pass JSON data with angular/nativescript routing

Question

I'm currently working on a nativescript/angular/typescript project and I'm basically trying to pass JSON data from one view (property) to another (propertyinfo).

First, I load up a JSON file in property.service.ts:

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Injectable()
export class PropertyService {
    public propertyData: any;
    public selectedProperty: any;

    constructor(private http: HttpClient) {
        this.loadProperties();
    }

    loadProperties() {
        this.http.get('/pages/property/property.json').subscribe(
            (data) => {
                this.propertyData = data;
            }
        )
    }
}

This JSON data gets displayed in a view property.component.html:

<StackLayout *ngFor="let item of propertyData" class="list-group" xstyle="height: 300">
<GridLayout rows="110" columns="*, 40" (tap)="details(item)">
    <StackLayout row="0" col="0">
        <Label text="{{item.streetName}} {{item.houseNumber}}" class="text-primary p-l-30 p-t-5"></Label>
        <Label text="{{item.etc}} {{item.etc}}" class="text-primary p-l-30 p-t-5"></Label>
    </StackLayout>
    <Label row="0" col="1" text="&#xf054;" class="fa arrow" verticalAlignment="middle"></Label>
</GridLayout>
<StackLayout class="hr-light"></StackLayout>

Here, the (tap)="details(item)" will call a function in property.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { PropertyService } from './property.service';

@Component({
    selector: 'app-property',
    templateUrl: 'pages/property/property.component.html',
    providers: [PropertyService]
})

export class PropertyComponent implements OnInit {
    public propertyData: any;

    constructor(private router: Router, private propertyService: PropertyService) {}

    ngOnInit() {
        this.propertyData = this.propertyService.propertyData;
    }

    details(item: any) {
        this.propertyService.selectedProperty = item;
        this.router.navigate(["/propertyinfo"]);
    }
}

Now, when I perform a console.log(JSON.stringify(this.propertyService.selectedProperty)); within my details function, the output is as follows:

JS: {"ID":4,"description":"Lorem ipsum dolor sit amet...", "streetName":"Somestreet","houseNumber":459,"etc":"etc"}

This is my propertyinfo.component.ts:

import { Component, OnInit } from '@angular/core';
import { PropertyService } from '../property/property.service';
import { Router } from '@angular/router';    

@Component({
  selector: 'app-propertyinfo',
  templateUrl: 'pages/propertyinfo/propertyinfo.component.html'
})

export class PropertyinfoComponent implements OnInit {
  public selectedProperty: any;

  constructor(private propertyService: PropertyService, private router: Router) { 
    this.selectedProperty = this.propertyService.selectedProperty;
  }

  ngOnInit() { }    
}

Yet, when I perform a console.log(JSON.stringify(this.selectedProperty)); inside the constructor, the output is JS: undefined.

At the bottom of this post, I'll add the app.routing.ts and app.module.ts files so you can see all of my imports/directives etc. I'm really at a loss as to what I'm missing. I hope you can help me.

app.routing.ts:

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { PropertyComponent } from "./pages/property/property.component";
import { PropertyinfoComponent } from ".//pages/propertyinfo/propertyinfo.component";

const routes: Routes = [
    { path: "", component: PropertyComponent },
    { path: "propertyinfo", component: PropertyinfoComponent },
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

app.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { PropertyService } from "./pages/property/property.service";
import { PropertyComponent } from "./pages/property/property.component";

import { PropertyinfoComponent } from "./pages/propertyinfo/propertyinfo.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptRouterModule,
        HttpClientModule,
        NativeScriptHttpClientModule,
    ],
    declarations: [
        AppComponent,
        PropertyComponent,
        PropertyinfoComponent
    ],
    providers: [
        PropertyService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }

Thank you for any help in advance. If I need to clear things up/provide any more info, please let me know.

Answer 1

console.log(JSON.stringify(this.selectedProperty)) returns undefined in PropertyinfoComponent because the PropertyService service being injected is not the same instance in PropertyinfoComponent than it is in PropertyComponent

you did not post the full .html for both component so I can only assume that you have something like the PropertyComponent is a parent component and has a reference/include a PropertyinfoComponent in the html and because of the way angular work, it injected a new instance of the service instead of using the one from the parent component.

check Thierry Templier answer for more information about angular service injection for this type of issue : How do I create a singleton service in Angular 2?