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