Learn RxJs: Introduction

RxJs (Reactive Extensions for JavaScript) is a library for reactive programming using observables, making it easier to compose asynchronous or callback-based code. Let’s Learn RxJs using its observables.

What Is RxJS?

RxJs is a library for composing asynchronous and event-based programs using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc.) to allow handling asynchronous events as collections.

The main goal of RxJs is to handle asynchronous data stream easily.

Observables And Observers In RxJs

Observables represent async data stream observers represent listener who is interested to hear this data stream. An observable function creates an observer and attaches it to the source where values are expected, for example, clicks, mouse events from a dom element, an HTTP request, etc.

Observer is an object with next(), error(), and complete() methods that will get called when there is an interaction with the observable, i.e., the source interacts, for example, button click, HTTP request, etc.

Subscription

When the observable is created, to execute the observable, we need to subscribe to it. It can also be used to cancel the execution. This is because observables and observers are nothing but RxJS objects; observables represent the Async data stream, and observers are nothing but a function that is subscribed to that observables and listens to that data stream and receives the data stream.
The goal of subscribe method is to attach Async data with listener.

Operators

Operators are nothing, but they are a small piece of logic that converts an observables stream to another observables stream. Observables are nothing, but they are a small piece of logic that you can plugin into the pipe line, and you can apply a filter, map, and sort with the help of the RxJs operator.

Subject

A subject is observable that can multicast, i.e., talk to many observers. For example, consider a button with an event listener. The function attached to the event using add listener is called every time the user clicks on the button. Similar functionality goes for the subject too.

How To Use RxJS With ES6 ?

There are a couple of ways that you can add the RxJS with library to your project. With npm you can use the following command:

npm install Rxjs

Note: RxJs 6 is a mandatory dependency starting from Angular 6, so you don’t need to install it manually.

Example

import { Component, OnDestroy, OnInit } from '@angular/core';

 import { Observable } from 'Rxjs';

 import { filter, map } from 'Rxjs/operators';

 @Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  })

 export class AppComponent implements OnInit, OnDestroy {

  name = 'Angular';

  streamsubscribe: any;

  AsyncStream(observer) {

    var t1 = setInterval(() => {

      observer.next(Math.random() * 10);

    }, 1000);

  }

  myobserv = Observable.create(this.AsyncStream);

  mainstreamobservable = Observable.create(this.AsyncStream);

  step1stream = this.mainstreamobservable.pipe(

    map((x: number) => Math.round(x))

  );

  step2stream = this.step1stream.pipe(filter((x: number) => x > 4));

  ngOnInit() {

    this.streamsubscribe = this.step2stream.subscribe((res) =>

      this.Listener(res)

    );

  }

  Listener(res: any) {

    console.log(res);

  }

  ngOnDestroy() {

    this.streamsubscribe.unSubscribe();

  }

 }

RxJs Demo : Click here