In a recent blog post, I addressed the issue of debouncing user input in Blazor applications. In Angular, we could use a debounce helper function like _.debounce from Underscore.js to achieve this. But to have more control over it, we can use RxJS just like in Blazor. This makes even more sense because Angular also uses RxJs a lot internally, for example in its HTTP client API.
In modern user interfaces, it is common to respond to user input immediately, without waiting for the user to submit it. This can be inefficient because the user is usually not interested in the intermediate results for each letter, but only in the whole word they are typing. Without compromising usability, we could wait until the user stops typing for a while, and only then submit the search query. A common term for this behavior is debouncing.
RxJS used to encourage monkey patching of operators and helper functions onto the Observable object. However, this has an unfortunate side effect of making the imports available everywhere. Removing an import from one file can inadvertently break code in other files. To alleviate this problem, alternative imports in the form of lettable operators are available since RxJS 5.5.
Let's create an Ionic 2 page that auto-refreshes at regular intervals with a twist: there's also a button for manual refresh which triggers an immediate refresh. We'll implement it in two different ways: with standard JavaScript functions and with RxJS.
Many Angular 2 and Ionic 2 APIs return RxJS observables. To unit test your code that's consuming them, you will need to create your own observable streams with test data. With this approach I wrote tests for code reacting to user's current geolocation.