Detect Data Chages When Another Component Make a POST or a PUT Request

Question

Mainly, I'm using angular2 and I have two components, the first one is responsible for displaying the data coming from the server on my page, the second one which is an ngmodal that pops up, is responsible for doing POST and PUT request to save the data.

the problem here is that when I change or add data, it doesn't get displayed automatically in my view.

Does any one know how to make that happens (make component A aware of the changes made by component B) ? thanks.

How I'm fetching data (component A) :

this.service.getData(this.url)
  .subscribe(data => {
    this.data = data;
    console.log(this.data);
  },
  err => { console.log('__error__') },
  () => { console.log('Success') }
  );

How I'm posting data (component B):

add(content: string): void {
if (!content) { return; }
this.service.create(content, this.url)}

My service.get Data:

getData(url:string): Observable<Object[]> {
return this.http.get(url)
  .map(res => res.json())
  .catch(this.handleError);}

My service.create (post example):

create(content: string, url:string): Observable<Object> {
    return this.http
        .post(url, JSON.stringify({ content: content }), { headers: this.headers})
        .map(res => res.json())
        .catch(this.handleError);}

Answer 1

I think what you need is to track the changes to the data in a Subject in your service. Then when you use the create method to make changes, you can update the new state of the data.

You can then access this data from any component by subscribing to it. Here is an example of that kind of architecture:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'component-a',
  template: `
    <div>data</div>
  `
})

export class ComponentAComponent implements OnInit {
  constructor(private service: ExampleService) { }
  url: string;
  data: any;

  ngOnInit() {
    this.service.data.subscribe(data => this.data = data);
  }


}

@Component({
  selector: 'component-b',
  templateUrl: 'component-a.component.html'
})

export class ComponentBComponent implements OnInit {
  constructor(private service: ExampleService) { }

  ngOnInit() { }

  add(content: string): void {
    if (!content) { return; }
    this.service.create(content, this.url)
  }

}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class ExampleService {
  data: Subject<any> = new Subject<any>();

  constructor(private http: Http) { }

  create(content: string, url:string): Observable<Object> {
    return this.http
        .post(url, JSON.stringify({ content: content }), { headers: this.headers})
        .map(res => res.json())
        .do(data => this.data.next(data) )
        .catch(this.handleError);}
}

Note that the Subject doesn't have an initial value and it will start emitting values once you call the create() method and it .next(data) into the Subject.

You can find more information about subjects here.

Push Notifications and Sockets

Alternatively if you want to keep track of data on your server and be notified of any changes that happen to it, you might be looking for push notifications using sockets. This needs to be set up on your server and may not be what you're talking about in this case.