Repeated HTTP requests in Angular2

Question

Say, I have more than 100 items in the database and the exact number not known. My back-end API will give me desired number of items if I provide the start item ID and the number of items required. Item ID is starting from 0 and increasing by 1.

I want to fetch them batch by batch (for example 10 items per batch) to process in the client side. After finishing processing one batch, I want to fetch the next batch.

What is the best way to achieve this using RxJS in my Angular 2 project?

Answer 1

I think you'll want to look into Subject s in RxJS. You can use one in an Angular2 Service to fetch the next page of results and push them to your UI using the subject's .next(<value>) api. Then expose a public observable to your components that they will subscribe to (or use an async pipe in a template) so that they can show the results.

The service that has the Subject can keep track of the number that you're at so it can have a fetchNextPage type of method on it that can be called to get the next batch of results pushed through the Subject and into your UI.

So something like this:

Injectable Service which has a Subject, probably methods like fetch and fetchNextPage to gather data, as well as an exposed results or something that is the Subject's .asObservable()

Component that gets the service injected, and then sets up a subscription to the service's results Observable. Call the service's fetch in your ngOnInit of your component, then when your UI deems it necessary, call fetchNextPage on the service to load more data.

Should work okay.