title: Trying to pass JSON data with angular/nativescript routing
body: <p>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).</p>
  
  <p>First, I load up a JSON file in <strong>property.service.ts</strong>:</p>
  
  <pre><code>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) =&gt; {
                  this.propertyData = data;
              }
          )
      }
  }
  </code></pre>
  
  <p>This JSON data gets displayed in a view <strong>property.component.html</strong>:</p>
  
  <pre><code>&lt;StackLayout *ngFor="let item of propertyData" class="list-group" xstyle="height: 300"&gt;
  &lt;GridLayout rows="110" columns="*, 40" (tap)="details(item)"&gt;
      &lt;StackLayout row="0" col="0"&gt;
          &lt;Label text="{{item.streetName}} {{item.houseNumber}}" class="text-primary p-l-30 p-t-5"&gt;&lt;/Label&gt;
          &lt;Label text="{{item.etc}} {{item.etc}}" class="text-primary p-l-30 p-t-5"&gt;&lt;/Label&gt;
      &lt;/StackLayout&gt;
      &lt;Label row="0" col="1" text="&amp;#xf054;" class="fa arrow" verticalAlignment="middle"&gt;&lt;/Label&gt;
  &lt;/GridLayout&gt;
  &lt;StackLayout class="hr-light"&gt;&lt;/StackLayout&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here, the <code>(tap)="details(item)"</code> will call a function in <strong>property.component.ts</strong>:</p>
  
  <pre><code>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"]);
      }
  }
  </code></pre>
  
  <p>Now, when I perform a <code>console.log(JSON.stringify(this.propertyService.selectedProperty));</code> within my details function, the output is as follows:</p>
  
  <pre><code>JS: {"ID":4,"description":"Lorem ipsum dolor sit amet...", "streetName":"Somestreet","houseNumber":459,"etc":"etc"}
  </code></pre>
  
  <p>This is my <strong>propertyinfo.component.ts</strong>:</p>
  
  <pre><code>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() { }    
  }
  </code></pre>
  
  <p>Yet, when I perform a <code>console.log(JSON.stringify(this.selectedProperty));</code> inside the constructor, the output is <code>JS: undefined</code>.</p>
  
  <p>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.</p>
  
  <p><strong>app.routing.ts</strong>:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>app.module.ts</strong>:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Thank you for any help in advance. If I need to clear things up/provide any more info, please let me know.</p>