Angular 2, Real time access dat

Question

hello I m making an app in angular 2 ,I have a component named test-summary.component and another component report.component , while running my app I have two components on two tabs, I want to pass an updated data from test-summary.component to report.component ,that data should be reflected to report.component in real time..I have tried a lot using subject,SubjectBehavior but I could not..Plz some one can help..?

Answer 1

Use event emitor for cross component to transfer data between components

//test-summary.component import { Events } from 'ionic-angular'; constructor(public events: Events) {} dataupdate(user) {this.events.publish('realtimereport', realtimedata);} //report.component constructor(public events: Events) { events.subscribe('realtimereport', (realtimedata) => { this.chartData = realtimedata;console.log(realtimedata);});}

you can use this from anywhere in you project

Answer 2

One Solution could be using services to hold the common data.

Both components can reference the same service variable.

If one component updates the variable, the changes would be automatically reflected in the other component.

Answer 3

What you do is use an @Input and a @Output (https://angular.io/guide/component-interaction). The parent page that show the tabs can be your communication.

In your test-summary.component:

export class Summary{
@Output() sumbitReport = new EventEmitter<any>();

someMethod(){
this.sumbitReport.emit(yourReport); 

In your report.component:

export class Report{
@Input() report: any;

Then in your parent component:

tabMethod(){
this.summaryReportTab= true;

parentDoSomethingWithReport(report: any){ // get from summary
this.parentReport = report; // pass to report component

And in your parent template:

<summary *ngIf="summaryReportTab" (sumbitReport)="parentDoSomethingWithReport($event)">></summary>
<report *ngIf="reportTab" [report]="parentReport"></report>