In an earlier post I described how to leverage the power of RxJS and the combineLatest() and startWith() operators to tidy up my code. I have since updated the code on that page to reflect the new RxJS6 pipe operators.

In my [previous post]({{ site.baseurl }}{% post_url 2018-03-26-rxjs-combinelatest-startwith %}) I came across a quirk with Angular, Observables and the Async pipe. That is, each subscription to an observable will initiate the observables execution. Hence we were calling the api once per async subscription. A subscribe call is simply a way to start an “Observable execution” and deliver values or events to an Observer of that execution.http://reactivex.io Original version <p>{{ (result$ | async).

05 June 2018 Update: Follow up post with further refactoring. 01 June 2018 Update: Updated code to RxJS6. Scenario In my Angular5 application I have a search results page that contains three components: Text-based filters component Paged results list Pagination component After wiring up my code I ended up with something similar to below. This all worked fine, but as you can see it’s quite repetitive and not to mention hard to maintain.