Angular - How to call make an HTTP Call that has multiple subscribers / subjects

Question

Sorry for the confusing title, it was hard wording it.

I have an angular service that calls an API and gets a list of pages. These pages are subscribed to from multiple components. With this in mind i use BehaviorSubjects to make sure each subscriber gets the updates.

When I want to add a new page, i need to submit a HTTP POST request to the server, and then handle the response. In handling it, i need to update the array and then call next() to send the updates around to the subscribers. This requires me to have a subscriber on the HTTP call (at least i think it does) so that i can call next(). However, at the same time as calling next, i also want the component to update and let the user know its been completed.

Here is a stackblitz example. app.component.ts line 38 has a call to the service to create a page. Commented out below, is a section of code that would subscribe and set the isSaving variable to false. however, i cannot subscribe to the method as it already has a subscription inside the pages.service.ts file.

https://stackblitz.com/edit/angular-abi4mn

I'm hoping the example makes more sense than my ramblings, apologies if the explanation is poor.

Answer 1

Currently you subscribe to the observable in your PagesService, the component which is calling the method should subscribe to it instead. So in your PagesService.add you should return the observable and you can subscribe to the observable in the calling component: this.pagesService.add(newPage).subscribe(...).

Now since you also want to do stuff in your PagesService after the POST request has succeeded, you can spy on the result of the observable without affecting it using tap operator, like so:

PagesService:

public add(page): Observable<any> {
 return this.httpClient
  .post('https://my-json-server.typicode.com/typicode/demo/posts', page)
  .pipe(
     tap(() => {
        this.pages.push(page);
        this._pages.next(this.pages);
     }),
  );
}

Answer 2

If you want to update pages array on same page, use _pages observable instead of local variable page. you need to do only three changes.

<p>
  In the real life example there will be multiple subscribers to the pages array on the pages service.  When I add to the array, i need to contact the backend server as well as, update the array so the subscribers can pick up the change.  
  </p>
  <p>
  As well as updating the array, it would be nice for the component thats submitting the call to know when the save has completed.  This way i can display some visual information to the user.  In this example i use the isSaving variable.  This is the part i dont know how to handle, i want to add to the pages array, but also have the component subscribe to the http call so that it can do some stuff once the call is complete.
  </p>
  <p>

  Number of Pages: <strong>{{(pagesService._pages | async).length}}</strong> <br />  <br />
  <button (click)="addPage()" [disabled]="isSaving">Add Page</button>
</p>

set private to public to _pages variable into service.

public _pages = new BehaviorSubject<any[]>([]);

and 3rd changes in need to update isSaving variable.

public getPages() {
    this.pagesService.get().subscribe((result: any[]) => {

      this.pages = result;
this.isSaving = false;
    }, error => {

      console.error(error);
    });
  }

I have tested all scenario and it's working fine. Let me know if you have any query. Thanks.