1

My Objective:

From a different component than shown below, I want to call the same service, and have it update this.displayData in display.component.ts

My component that subscribes to a service for data to display on the UI.

display.component.ts

 this.displayDataService.getDisplayData(items)
                    .subscribe(
                        (res: Result) => {
                        // when service is called from another component,
                        // I want this to update
                        this.displayData = res;
 });

Here is my service which is being subscribed to

display-data.service.ts

public getDisplayData(items: Array<string>): Observable<any> {
    return this.http.post(myEndpoint, items, headers).map(res => res.json());
}

The Problem:

Whenever I call the service from another component, it does not update the subscription in display.component.ts

How can I update the display.component subscription by calling the service from a different component? I thought every subscription would be updated when I called the shared service.

Note: I only have one instance of my service, which is in app.module.ts.

Edon
  • 1,116
  • 2
  • 22
  • 47
  • I dont understand the question. Let me rephrase your question: "You want to get the same result of an observable at two different isolated places after injection." If this is your question then you are using the incorrect api of rxjs. You should be using Subject to create the observable which has the capability to be subscribed by multiple listeners that gets same result. Observable api will provide you a different run values if subscribed at different places(they are multiple runs of obs). https://blog.angulartraining.com/rxjs-subjects-a-tutorial-4dcce0e9637f – Gary Nov 18 '18 at 03:51
  • @Gary your rephrasing is correct. I'll check out your link, thank you! – Edon Nov 18 '18 at 03:55
  • Yes. Http Observable is such designed. To subscribe same instance values from a Observable that use same trigger of the observable - assign the value on obs subscription to a state mgmt context or a service variable that is accessed by all users instead of all subscribing to obs. This is a way around for Observable if you are not using a Subject. – Gary Nov 18 '18 at 03:56
  • @Gary that makes a lot of sense, I had a misunderstanding of how the service worked, thanks! Feel free to post that as an answer so I can accept – Edon Nov 18 '18 at 03:58
  • @RandyCasburn that should resolve your concern. But creating a service for HTTP with Subject is not that difficult. It is a use case I have come across. The issue/point is you dont need multicast listeners for HTTP. You are adding to the listeners overhead in your app. The right way of doing it is to create a HTTPResponse variable in a service thats an Observable and Listen to it OR create a HTTPResponse service variable that is injected and printed directly into the view using the DOM template. – Gary Nov 18 '18 at 04:00
  • 1
    How I would have done is not by creating an Subject for HTTP but putting the response to a variable in a service and then listening to the service variable changes OR printing the service variable value directly to the DOM template – Gary Nov 18 '18 at 04:04
  • @Gary that actually makes more sense, so essentially I'd have a get function that returns a var value as an observable, which I can listen to in my display component, and a set that calls the service and defined the var? This might be ideal because I want to update the display component from several other places – Edon Nov 18 '18 at 04:04
  • 1
    Yes @Edon, I would also do use the HTTPResponse inside a service variable and get the value from there. It ensures you have the same value since its a singleton. While Subjects and Observables are great, managing a lot of events and observables in an app can get overwhelming especially during maintenance. – Gary Nov 18 '18 at 04:07
  • Thanks @Gary ! I'm a bit lost on the HTTPResponse inside a service variable thing, but I get the overall idea. I'll try and find an example of the httpresponse you are talking about. I've used subjects before and I agree they can get overwhelming – Edon Nov 18 '18 at 04:08
  • HTTPResponse is the successful response Type you will get https://angular.io/api/common/http/HttpResponse It uses HTTPResponseBase extend https://angular.io/api/common/http/HttpResponseBase These are available in response. – Gary Nov 18 '18 at 04:10
  • 1
    An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast. A Subject is like an Observable, but can multicast to many Observers https://stackoverflow.com/questions/47537934/what-is-the-difference-between-a-observable-and-a-subject-in-rxjs – Gary Nov 18 '18 at 04:11
  • 2
    this.http.post(myEndpoint, items, headers).subscribe((res: HttpResponse) => {/*some action*/}); – Gary Nov 18 '18 at 04:13
  • @Gary ohh now I get what you mean. Alright, I'm gonna give implementing this a shot, this seems like a great solution. Thanks for clearing this up! – Edon Nov 18 '18 at 04:14
  • Looking into comments - doesn't make me clear, looking forward for the working solution as any answer - Keen to look at the solution – Rahul Nov 18 '18 at 04:48
  • I possible think you won't need a working app. Here is what you need to do. Create a http request from anywhere. Assign the response value in a service which is an observable. Listen to the observable/subject from different places when needed. It's not as complicated. – Gary Nov 18 '18 at 05:00

0 Answers0