RxJS in Angular — Basics

Jawadhasan
5 min readOct 15, 2023
Photo by Mark Stuckey on Unsplash

Introduction

RxJS, or Reactive Extensions for JavaScript, is Observables implementation for JavaScript.

RxJS is a library for composing async and event-based progress by observable sequences. Examples Production-lines, airport baggage conveyor belt, a stream etc.

With Reactive programming, we create our entire app by defining the various streams and the operations that get performed on those streams.

In this post, we’ll learn the basics of RxJS and in upcoming posts, will focus more on the real world usages.

Setup

I will be using an existing angular application and if you are following along this is the same code base from my other angular articles.

The source code is available from this git repo.

Diagram

The following diagram shows the basic data-flow from source to observer via observable:

Observable

A collection of events or values emitted over time.

  • User actions such as MouseMove, Selection etc.
  • App events (e.g. routing, form)
  • Response from an HTTP Request.
  • Internal structures.

Think of observable as a conveyor collecting and emitting items to an observer. It connects observer to a source of data or events.

Observer

  • Observe notifications from observable.
  • Provides methods to process notifications
  • next(): to handle next emitted items.
  • error(): to handle an error notification.
  • complete(): to do any final processing or cleanup.

So, an observer is a collection of callbacks that knows how to listen to values delivered by the observable.

Subscriber

One class that implements the observer interface is a subscriber.

--

--

Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect