Reactive programming using RxJS

Regarding reactive programming in the context of Angular applications, RxJS stands at its core. RxJS is short for Reactive Extensions Library for JavaScript. As the name reveals, it’s a library for handling reactivity within JavaScript, and it is built-in and used by default within the Angular framework.

RxJS is used to create, consume, modify, and compose asynchronous and event-based data streams. At its core, RxJS revolves around four major concepts: Observables, Observers, Subjects, and operators. Let’s dive deep into these concepts individually, starting with Observables.

What are Observables?

Observables are the cornerstone of RxJS. You can see Observables as a stream or a pipeline that emits different values over time in an asynchronous manner. To receive the values emitted by the Observable data stream, you subscribe to the Observable.

Now, imagine an Observable data stream as a water pipe. When you turn on the tap (subscribe...