Introduction to Angular rxjs

Reactive Extensions for JavaScript (RxJS) is a reactive streams library that allows you to work with asynchronous data streams. RxJS can be used both in the browser or on the server-side using Node.js

When to use RXJS ?

1. Use to deal with asynchronous sequences of data
2. Simple state management in application with services
3. Asynchronous and Event-Based Programming with RxJS

Use to deal with asynchronous sequences of data

The RXJS library uses observable. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable can handle multiple events, this is not possible in promise. Observable also has the advantage over Promise to be cancelable in nature.

let a = new Observable(observer => {
 setTimeout(() => observer.next(1), 1000);
 setTimeout(() => observer.next(2), 2000);
 setTimeout(() => observer.complete(), 3000);
});
a.subscribe(result => console.log(result));

Output 1,2

Simple state management in application with services

Angular doesn’t have a single prescribed pattern for state management. One of the most challenging things in software development is state management. Currently, there are several state management libraries for Angular applications like NGRX, NGXS.

All of them have different styles of managing state, the most popular being NGRX. The NGRX provides state management for creating maintainable explicit applications, by storing a single state and the use of actions in order to express state changes.
For small projects instead of using a library like NGRX, we can effectively use services along with the RXJS library for data state management across the different components.