title: Share Data between two pages/tabs angular2
body: <p>i have two different pages sender and receiver and are on open in two different <strong>tabs</strong></p>
  
  <p>i.e <strong>one tab</strong> of browser has <strong><a href="http://localhost:4200/sender" rel="nofollow noreferrer">http://localhost:4200/sender</a></strong></p>
  
  <p>i.e <strong>2nd tab</strong> of borwser has <strong><a href="http://localhost:4200/receiver" rel="nofollow noreferrer">http://localhost:4200/receiver</a></strong></p>
  
  <p><strong>receiver.component.ts</strong></p>
  
  <p>this component will detect/sync the change that will be  applied by the second page/tab i.e It will change the content based on the boolean attribute <strong>OnMain</strong></p>
  
  <pre><code>       import {Component,bind,CORE_DIRECTIVES,OnInit} from 'angular2/core';
  import {MainComponent} from 'src/MainComponent';
  import {SharedService} from 'src/shared.service';
  @Component({
      selector: 'my-app',
      directives:[MainComponent],
      template: `&lt;h1&gt;AppComponent {{onMain}}&lt;/h1&gt;
      &lt;div *ngIf="onMain == false"&gt;
         Hello
        &lt;br&gt;Show this content if false&lt;br&gt;
      &lt;/div&gt;
  
  
      })
  
  export class AppComponent implements OnInit {
    onMain: Boolean;
  
    constructor(ss: SharedService) {
        this.onMain = false;
        this.ss = ss;
      }
  
  
  
      ngOnInit() {
      this.subscription = this.ss.getMessage()
        .subscribe(item =&gt; this.onMain=item);
    }
  
  }
  </code></pre>
  
  <p><strong>sender.component.ts</strong></p>
  
  <p>the page/tab having sender component wants to alter the content of first page/tab </p>
  
  <pre><code>      import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
  import {SharedService} from 'src/shared.service';
  @Component({
      selector: 'main-app',
  
      template: `&lt;h1&gt; Sencond Page Component&lt;/h1&gt;
      &lt;button (click)="changeFirstPageMenu()"&gt;Hide Menu&lt;/button&gt;
      `
  })
  
  export class MainComponent {
  
  
  
      constructor(ss: SharedService) {
        this.ss = ss;
      }
  
      changeFirstPageMenu() {
        this.ss.sendMessage(true);
      }
  }
  </code></pre>
  
  <p><strong>Data Service.ts</strong>
   this is a shared service having the data that has to be altered by one page and the change will be synced to the other page(i.e receiver)</p>
  
  <pre><code>       import { Subject } from 'rxjs/Subject';
  
  @Injectable()
  export class LandingService {
      private subject = new Subject&lt;any&gt;();
  
      sendMessage(message: any) {
          this.subject.next({ text: message });
  
      }
  
      clearMessage() {
          this.subject.next();
      }
  
      getMessage(): Observable&lt;any&gt; {
          return this.subject.asObservable();
      }
  }
  </code></pre>
  
  <p>now the problem is the <strong>components</strong> are loaded on two different tabs/pages of a browser and these two tabs/pages have no relation they have their own instances declared and so any <strong>service</strong>(subject,behaviour),<strong>observers</strong> are not able to share the data between these two tabs so how can i share the data between two pages , and the change must be sync or reflected on the receiver page</p>