Angular RxJS: Observables, Observers and Operators Introduction

In the above definition of RxJS, you have encountered the word reactive programming, so let me give you a brief example of reactive programming.

What Is Reactive Programming?

Reactive programming is a declarative programming paradigm concerned with the data streams and the propagations of change.

A programming paradigm is a style or way of programming.
Few common programming paradigms includes:

Imperative Programming

Control flow in imperative programming is explicit. Commands show how the computation takes place, step by step. Each step affects the global state of the computation.

Declarative Programming

Control flow in declarative programming is implicit. The programmer states only what the result should look like, not how to obtain it.

As RxJS is a declarative programming language, so for better understanding of this, let’s take a look at below example. I am going to show an example, how below code works in imperative and declarative programming both.

Example

For example: In imperative programming, a = b +c would mean that a is being assigned the result of b + c in the instant the expression is evaluated, and later, the values of b and c can be changed with no effect on the value of a.

On the other hand in reactive programming, which is declarative, the value of a is automatically updated whenever the value of b or c is changed, without the program having to re-execute the statement a = b + c to determine the presently assigned value of a.

So, RxJS is an incredible tool for reactive programming, and today we are going to dive a little deeper into what observables, observers and operators are.

What is an Observable?

An observable is just a function, which packs the data that can be passed around from one thread to another thread. They are created to emit the data synchronously or asynchronously based on their configuration. They are like the supplier of data to their consumer.

Angular use lot of observables in different scenarios. These includes:

To make AJAX request and response,Angular HTTP module uses observables.
Observables are used in Router and Form Modules to listen for and responds to user-inputs events.
The EventEmitter class extends Observable.

To better understand Observables, let’s create a sample code.

const GetSumObserver = {
	  sum: 0,
	  next(value) {
	    this.sum = this.sum + value;
	  },
	  error() { },        
	  complete() {
	    console.log('Total Sum: ' + this.sum);
	  }
	};
	 
	Rx.Observable.of(10, 20, 30) // Synchronously emits 10, 20, 30 and then completes.
	.subscribe(GetSumObserver);
	 
	// "Sum equals: 60"

sampleexample.ts

Here, in the above example, we have created our custom observable and subscribe it using the three input values, and the result should be the sum of all values passed to it.

What is an Observer?

In simple term, observers are the consumer of the data, which is emitted by observables as a producer. To consume data, observers subscribe to the observables using its subscribe() method. So, whenever observables emit data, all the registered observers received the data in next() callback.

An observer is an object that defines callback methods to handle three types of notifications that an observable can send. These callback methods are: next(), error() and complete().

To make AJAX request and response,Angular HTTP module uses observables.
Observables are used in Router and Form Modules to listen for and responds to user-inputs events.
The EventEmitter class extends Observable.

We have subscribed our observable using .subscribe() method using the .of() operator, passing the values as a parameter. Without subscribe calling, our observable will not emit any value.

What is an Operator?

RxJS provides us numerous operators like map(), filter(), concat() etc. to perform complex manipulation of the collection on the source observables. Operators are just like functions, which takes configuration options, and return a function that takes a source observable.

Few of the RxJS operators are:

To make AJAX request and response,Angular HTTP module uses observables.
Observables are used in Router and Form Modules to listen for and responds to user-inputs events.
The EventEmitter class extends Observable.

Let’s take a small example of operators.

Using pipe() operator, you can combine multiple operators. For example:

import { filter, map } from 'rxjs/operators';
	const squareOf2 = of(1, 2, 3, 4, 5,6)
	  .pipe(
	    filter(num => num % 2 === 0),
	    map(num => num * num)
	  );
	squareOf2.subscribe( (num) => console.log(num));

operators.ts

The of() method will create and return an Observable from the 1, 2, 3, 4, 5,6 numbers and the pipe() methodwill apply the filter() and map() operators on each emitted value.

Summary

In this blog, we read about observables, observers and operators used in Angular app. This post is not in details, but give you an overview of all these concepts. I shared links of few famous operators, which are frequently used in anyAngular app.

What Is Reactive Programming?

Reactive programming is a declarative programming paradigm concerned with the data streams and the propagations of change.

A programming paradigm is a style or way of programming.
Few common programming paradigms includes:

Imperative Programming

Control flow in imperative programming is explicit. Commands show how the computation takes place, step by step. Each step affects the global state of the computation.

Declarative Programming

Control flow in declarative programming is implicit. The programmer states only what the result should look like, not how to obtain it.

Example

So, RxJS is an incredible tool for reactive programming, and today we are going to dive a little deeper into what observables, observers and operators are.

What is an Observable?

Angular use lot of observables in different scenarios. These includes:

To make AJAX request and response,Angular HTTP module uses observables.
Observables are used in Router and Form Modules to listen for and responds to user-inputs events.
The EventEmitter class extends Observable.

To better understand Observables, let’s create a sample code.

const GetSumObserver = {
	  sum: 0,
	  next(value) {
	    this.sum = this.sum + value;
	  },
	  error() { },        
	  complete() {
	    console.log('Total Sum: ' + this.sum);
	  }
	};
	 
	Rx.Observable.of(10, 20, 30) // Synchronously emits 10, 20, 30 and then completes.
	.subscribe(GetSumObserver);
	 
	// "Sum equals: 60"

sampleexample.ts

Here, in the above example, we have created our custom observable and subscribe it using the three input values, and the result should be the sum of all values passed to it.

What is an Observer?

An observer is an object that defines callback methods to handle three types of notifications that an observable can send. These callback methods are: next(), error() and complete().

To make AJAX request and response,Angular HTTP module uses observables.
Observables are used in Router and Form Modules to listen for and responds to user-inputs events.
The EventEmitter class extends Observable.

We have subscribed our observable using .subscribe() method using the .of() operator, passing the values as a parameter. Without subscribe calling, our observable will not emit any value.

What is an Operator?

Few of the RxJS operators are:

To make AJAX request and response,Angular HTTP module uses observables.
Observables are used in Router and Form Modules to listen for and responds to user-inputs events.
The EventEmitter class extends Observable.

Let’s take a small example of operators.

Using pipe() operator, you can combine multiple operators. For example:

import { filter, map } from 'rxjs/operators';
	const squareOf2 = of(1, 2, 3, 4, 5,6)
	  .pipe(
	    filter(num => num % 2 === 0),
	    map(num => num * num)
	  );
	squareOf2.subscribe( (num) => console.log(num));

operators.ts

The of() method will create and return an Observable from the 1, 2, 3, 4, 5,6 numbers and the pipe() methodwill apply the filter() and map() operators on each emitted value.

Angular RxJS: Observables, Observers and Operators Introduction

What Is Reactive Programming?

Imperative Programming

Declarative Programming

Example

What is an Observable?

What is an Observer?

What is an Operator?

Summary

Further Reading

What Is Reactive Programming?

Imperative Programming

Declarative Programming

Example

What is an Observable?

What is an Observer?

What is an Operator?

Summary

Further Reading