Share Data between two pages/tabs angular2

Question

i have two different pages sender and receiver and are on open in two different tabs

i.e one tab of browser has http://localhost:4200/sender

i.e 2nd tab of borwser has http://localhost:4200/receiver

receiver.component.ts

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 OnMain

       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: `<h1>AppComponent {{onMain}}</h1>
    <div *ngIf="onMain == false">
       Hello
      <br>Show this content if false<br>
    </div>


    })

export class AppComponent implements OnInit {
  onMain: Boolean;

  constructor(ss: SharedService) {
      this.onMain = false;
      this.ss = ss;
    }



    ngOnInit() {
    this.subscription = this.ss.getMessage()
      .subscribe(item => this.onMain=item);
  }

}

sender.component.ts

the page/tab having sender component wants to alter the content of first page/tab

      import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'main-app',

    template: `<h1> Sencond Page Component</h1>
    <button (click)="changeFirstPageMenu()">Hide Menu</button>
    `
})

export class MainComponent {



    constructor(ss: SharedService) {
      this.ss = ss;
    }

    changeFirstPageMenu() {
      this.ss.sendMessage(true);
    }
}

Data Service.ts 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)

       import { Subject } from 'rxjs/Subject';

@Injectable()
export class LandingService {
    private subject = new Subject<any>();

    sendMessage(message: any) {
        this.subject.next({ text: message });

    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

now the problem is the components 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 service(subject,behaviour),observers 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

Answer 1

You can ping to your back end service at any time to get the most recent updated data.

Assume that you update data in first tab and you want it in another tab. When you open second tab (i.e focus second tab) you give a back end request (call a service) once so that it will fetch you the latest data on second tab which was updated from first tab.

You will get many posts to observe the tab focused event.

http://www.thefutureoftheweb.com/blog/detect-browser-window-focus