RxJS and Angular Pull-To-Refresh that emulates native iOS and Android— RxJS Challenge #18

Here is my last RxJS Challenge and it is big and really challenging!

Sometimes, we want to make our web apps more native. It can happen, for example, when a large number of our users come from mobile devices or when we create a PWA.

You are offered to imitate native iOS and Android pull-to-refresh behavior on the web with RxJS and Angular.

Try it here: https://stackblitz.com/edit/rxjs-challenge-18

Let’s solve it

The basis of the pull-to-refresh pattern is actually pulling. That is why I want to make it first. Moreover, I want to separate pulling logic from the pull-to-refresh component and describe it in one other place. For this, I will use a pattern that we called Private Providers. You can read a big article about this approach here.

First of all, let’s add a new file to the component folder: pull-to-refresh.providers.ts. Here we’ll have an Angular token and provider with a factory that builds the stream needed by pull-to-refresh component.