title: Angular 2/Typescript share (dynamic) data between pages
body: <p>Alright, this question is probably asked quit alot, but I am still going to ask.</p>
  
  <p>I am new to Typescript/Angular 2. I have two pages, lets say Page A and Page B
  On page A i use api A to request data. After retreiving the data, the user can click on a link/button and he/she switches to page B through routing, page B uses data specific from page A to request data from api B. Now the API stuff is working fine. But I just can't seem to get data from page A to page B. </p>
  
  <p>Now I have read that Parent/Child/Sibling uses a injectable service with a obeservable and I tried that. But it doesn't work... at all. </p>
  
  <p>I made sure that the providers are set correctly and that the injectable service is instantiated only once.</p>
  
  <p>Is their a written rule/way to go about this? My situation isn't really Parent/Child related. But kinda is. </p>
  
  <p>Basically this is what I did:
  Service:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Subject} from 'rxjs/Rx';
  import {BehaviorSubject} from 'rxjs/Rx';
  
  @Injectable()
  export class ShareService {
  
     public data : Subject&lt;string&gt; = new BehaviorSubject&lt;string&gt;(null);
  
     constructor(){
     } 
     setData(newdata : string){
         this.data.next(newdata);
     }
  
     clearData(){
         this.data.next();
     }
  }
  </code></pre>
  
  <p>Page A:</p>
  
  <pre><code>import {Component, OnInit, OnDestroy} from '@angular/core';
  import {ShareService} from '../../services/share.service'
  import {Subject} from 'rxjs/Rx';
  import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
  import 'rxjs/add/operator/share';
  import 'rxjs/add/operator/map';
  @Component({
      selector: 'pagea',
      template: `
          &lt;button (click)="gotoPageB()" class="item" &gt; click me &lt;/button&gt;
  `
  })
  export class CurrentlyAiring {
      constructor(private shareService: ShareService, private router: Router){
      }
      gotoPageB(){
          this.shareService.setData("Normally I would send a json string here!");
          this.router.navigate(['/pageb']);  
      }
  
  }
  </code></pre>
  
  <p>Page B:</p>
  
  <pre><code>import {Component, OnInit, OnDestroy} from '@angular/core';
  import {Router} from '@angular/router';
  import {ShareService} from '../../services/share.service'
  import {Subject} from 'rxjs/Rx';
  import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
  import 'rxjs/add/operator/share';
  import 'rxjs/add/operator/map';
  @Component({
      selector: 'pageb',
      template: `
          &lt;button  class="item" &gt; {{somedata}} &lt;/button&gt;
  `
  })
  export class CurrentlyAiring {
      somedata : string;
      constructor(private shareService: ShareService){
          this.packlistobserver = this.shareService.data.subscribe((data) =&gt; {
              if(json !== null){
                  this.somedata = data;
              } 
          });
      }
  
  }
  </code></pre>
  
  <p>I only put the necessary code here which should work in my opinion, but I might have left out something important! I just didn't want to put the whole code here. But basically what is above here is what I am trying to pull of. </p>
  
  <p>At one point I was just giving up and started using localStorage to share data, but I didn't really like it, since I can't imagine that there isn't a Angular 2/typescript way to do it without the use of localStorage.</p>
  
  <p>Thanks in advance for all the help you can give this noob ;).</p>
  
  <p>EDIT: <a href="https://stackblitz.com/edit/angular-p2ucdh" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-p2ucdh</a>  </p>
  
  <p>It works here, I must have made a grave mistake in my actual application :(. At this point I think I might rewrite the whole damn thing. </p>
  
  <p>Actual project (with horrible code): <a href="https://github.com/EldinZenderink/LittleWeebTS/" rel="nofollow noreferrer">https://github.com/EldinZenderink/LittleWeebTS/</a></p>