4 Useful Reactive Programming Implementation Styles

Build web applications using RxJS with Angular

Image by Coffee Bean from Pixabay

This post is a follow-up to my previous post about RxJS Operators. I’m going to jump right through the practical examples of using Reactive programming in building web applications.

All my code samples are using RxJS with Angular written in TypeScript. Every section will start with a GIF of the final result.

Events From Button Clicks

I’m kicking us off with a simple example. We have a button that triggers an event when it is clicked — an everyday use case in web development.

Button click example by the author.

The button that emits events will be treated as an Observable with a stream of events. Let’s take a button that prints to the browser console when it is clicked.

<button id="mybutton">Click me</button>

We will first initialize an observable from that button that we can subscribe to for click events.

const observableButton: rxjs.Observable = rxjs.fromEvent(document, 'click');