How to refresh an observable in angular2 after a POST

angular, observable, rxjs, rxjs5

Solution

Two ways you can use.

One is call GET request inside POST subscribe event.

this.guardianService.editGuardian(this.guardData).subscribe(res=> {
  this.loadData();  // this is function who makes GET request
});

The other way is to use ReplaySubject.

private subject: Subject<any> = new ReplaySubject<any>(1);

get $getSubject(): Observable<any> {
  return this.subject.asObservable();
}

loadData() {
    this._http.get(url, header)
        .map(x=>x.json())
        .subscribe(data=> {
          this.subject.next(data);
        });
}

postData(data) .....

This is Service. Here here goes component

this.serviceHandle.$getSubject.subscribe(res => {
  //here goes any thing you want to do.
});
this.serviceHandle.loadData(); // this function will make reqeust


this._accountService.editAccountData(account).subscribe(res=> {
  this.serviceHandle.loadData();
});

Problem

I have a table that shows information, upon clicking on a table row, user can update the values once he completes the request, the table is not updated with the new values and I must do an F5 to refresh the view. How do I force a new get request upon completing the request here is the relevant code MY SERVICE ``` import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import {Observable} from 'rxjs/Rx'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; // Import RxJs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import { Device } from '../model/Device'; @Injectable() export class DeviceService { devices$: BehaviorSubject<Device[]>; constructor(private http : Http) { this.initializeDevices(); } initializeDevices() { var url = "./api/read/network/device"; //var url = '../assets/data/devices.json'; if (!this.devices$) { this.devices$ = <BehaviorSubject<Device[]>> new BehaviorSubject(new Array<Device>()); this.http.get(url) .map((res:Response) => res.json()) .subscribe(devices => { this.devices$.next(devices); }); } } subscribeToDevices(): Observable<Device[]> { return this.devices$.asObservable(); } } ``` my component ``` import { Component, OnInit, ViewChild } from '@angular/core'; import { DeviceService } from '../../services/device.service'; import { MacService } from '../../services/mac.service'; import { Device } from '../../model/Device'; @Component({ selector: 'app-device-table', templateUrl: './device-table.component.html', styleUrls: ['./device-table.component.sass'] }) export class DeviceTableComponent implements OnInit { devices; //reference to the datatable needed to count filtered rows @ViewChild ('dt') dt; constructor(private deviceService : DeviceService, private macService : MacService) { } ngOnInit() { this.registerEvents(); this.getDevices(); } getDevices(){ this.deviceService.subscribeToDevices().subscribe( devices => this.processDevices(devices), error => console.log(error) ); } processDevices(devices){ //just data manipulation } emitShowDialogEvent(device) { if(!device.macAddress) { return; } this.macService.broadcastShowDialogEvent(device.macAddress); } registerEvents(){ this.macService.dataChangedEvent.subscribe(event =>{ console.log('data changed event'); this.getDevices(); //not provoking a new GET request to the API :( }); } } ``` I have another component, MACService, that upon sending a POST request emits an event that is captured as dataChangedEvent

Original source