RxJS in Angular — Basics

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.