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 an HTTP POST request to the server, and handle the response. While handling it, I need to update an array, then call next() to send the updates to all of 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, while calling next, I also want the component to update and let the user know the request has been completed.
Here is a stackblitz example. In app.component.ts, line 38 has a call to the service to create a page. Below that is a section of commented out 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.
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);
}),
);
}