Angular - RxJS

This chapter will discuss the RxJS Library and Reactive programming, including their importance, key concepts, and working examples, how the RxJS library is used in the Angular project.

Before proceeding with the RxJS library, you should know about the Reactive programming, which will help you to understand it easily.

What is Reactive Programming?

In computing, Reactive programming is a way of writing code, where you deal with "data streams" and "changes automatically". It is telling the computer what you want to do, rather than how to do it step by step. This approach helps you to keep your program structured and easier to understand for others.

Example

In the following example we use the reactive programming, so the value of variable a is automatically updated whenever the values of b or c change, without the program having to explicitly re-state the statement a := b + c to re-assign the value of a:

 //normal program var b = 5; var c = 7; var a = b + c; b = 5; console.log(a); // 12 //reactive program var b = 5; var c = 7; var a $= b + c; b = 5; console.log(a); // 17 

The other one is a reactive program, which emits real-time updates when the related or its own value propagates (changed).

How does Reactive Programming work?

Reactive programming is a programming paradigm that deals with asynchronous data streams and the propagation of changes. It allows developers to model and manage data flows in a better way. It is simplifying the handling of asynchronous tasks such as UI updates, event handling, and managing data that changes over time.

What is RxJS?

The RxJS stands for "Reactive Extensions for JavaScript", which is a library for "reactive programming" using observable's that make easier to compose "asynchronous" or "callback-based" code.

In addition, the RxJS library is used to compose the "asynchronous" and "event-based" programs by using observable sequences. It provides one core type, the "Observable", "satellite" types (Observer, Schedulers, Subjects), and "operators" inspired by Array methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

Note! Asynchronous data refers to data that is processed or retrieved at different times, rather than in a sequential or synchronous manner.

Key Concepts

Here are some key concepts of the RxJS library that solve Async event management:

• Observable: An Observable in Angular is a key part of reactive programming, providing support for passing messages (data) between publishers and subscribers asynchronously.
• Observer: It is a collection of callbacks that knows how to "listen" to values delivered by the Observable.
• Subscription: It represents the "execution of an Observable" and is primarily used to cancel the execution.
• Operators: These are the pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
• Subject It's "equivalent to an EventEmitter", and it is the only way of multicasting a value or event to multiple Observers.
• Schedulers: These are "centralized dispatchers" that control concurrency, allowing us to coordinate when computation happens.

This library also provides utility functions for creating and working with "observables". These utility functions can be used for:

• Converting existing code for async operations into observables.
• Iterating through the values in a stream.
• Mapping values to different types.
• Filtering streams.
• Composing multiple streams.

Examples of RxJS

Here are a few examples that help you understand the "RxJS library", "observable concept", and "reactive programming" better:

Example 1: Register Event Listener

In HTML, you normally register an event listener using the addEventListener() method as:

 document.addEventListener('click', () => console.log('You Clicked!')); 

But in the RxJS, you can create an observable instead of registering an "eventListener":

 import { fromEvent } from 'rxjs'; fromEvent(document, 'click').subscribe(() => console.log('You Clicked!')); 

Here, the subscribe() method is used to access the observable data. No changes will be reflected until you subscribe to it.

Example 2: Purity (using the pure functions)

What makes RxJS powerful is its ability to generate values ​​using pure functions. This means your code will have fewer errors.

In RxJS, a pure function is one that, given the "same inputs", always produces the "same outputs" and has no side effects.

Usually, you would create an impure function, where other pieces of your code can mess up your state (fields).

Here, is how you implement in JavaScript −

 let count = 0; // initial value 0 //adding event listener document.addEventListener('click', () => console.log(`Clicked ${++count} times`)); 

The above snippet of code will "count" the "number of clicks" on the "document" and log the count each time the document is clicked.

Using RxJS you isolate the state (field):

 import { fromEvent, scan } from 'rxjs'; fromEvent(document, 'click') .pipe(scan((count) => count + 1, 0)) .subscribe((count) => console.log(`Clicked ${count} times`)); 

Here,

• The scan operator in RxJS works similarly to the reduce() function for arrays. It takes an initial value and a callback. Each time the callback runs, it returns a value that will be used as the input for the next iteration.

Using RxJS with Angular

The RxJS library provides several functions that can be used to "create new Observable" in Angular Project.

These functions can simplify the process of creating observables from various sources such as events, timers, and promises. For example:

Create an observable from a promise

In the following snippet of code, we create an observable using the from operator with a promise returned by the "fetch API" in Angular −

 import { from, Observable } from 'rxjs'; // Create an Observable from out of promise const data = from(fetch('/api/endpoint')); // Subscribe to start listening for async output data.subscribe({ next(res) { console.log(res); }, error(err) { console.error('Error: ' + err); }, complete() { console.log('Completed'); } }); 

Create an observable from a counter

In this example, we will create an observable that emits incrementing numbers every 1000 milliseconds (1 second) in Angular −

 import { interval } from 'rxjs'; // Create an Observable const secondsCounter = interval(1000); // Subscribe to start interval values const subscription = secondsCounter.subscribe(n => console.log(`It's been ${n + 1} seconds since the subscription started!`)); 

Why to use RxJS in Angular?

Below is the list of several benefits that define why to use RxJS Library in Angular:

• Reactive Programming: It allows for Reactive programming, which makes it easier to simplify the asynchronous code.
• Error Handling:RxJS provides robust error-handling mechanisms, allowing you to smoothly handle and recover from errors in your asynchronous operations.
• Data Transfer: Using the RxJS operators, you can easily transform data streams, such as mapping, filtering, and reducing data.
• Angular Integration: Angular has built-in support for RxJS, and many Angular modules, such as HttpClient, are designed to work easily with observables.

Conclusion

In Angular, the RxJS library provides powerful tools for managing asynchronous data and events. It helps you to write clean, concise, and maintainable code by allowing you to handle complex data streams and errors. Using RxJS, you can easily manage state, handle user interactions, and perform various tasks reactively and functionally, making your Angular applications more scalable.