RxJS (Reactive Extensions for JavaScript)

|
| By Webner

Introduction to RxJS

RxJS is a popular library among web developers. It provides some features like functional and reactive programming patterns that support working with events and streams. Rxjs provides the functionality to write asynchronous code. The current stable version is Rxjs v6.

RxJS 6 has many advantages over the previous RxJS 5 version :

  1. Bundle size is smaller as compared to Rxjs version 5.
  2. The performance of the latest version is better.
  3. Better debuggable.

Reactive Programming:

Reactive programming is used to treat streams of data called Observables. Observable is like a stream that emits data on a continuous interval of time. Observable is useful when we subscribe to the data through the subscribe method.

Example: Use of Rxjs with Interval

// RxJS v6+
import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
@Component({
selector: 'app-todos',
templateUrl: './todos.component.html',
styleUrls: ['./todos.component.css'] })
export class TodosComponent implements OnInit {
title: any;
constructor() {
this.title = "Testing";
}
ngOnInit() {
interval(6000).subscribe(x => this.title = '');
}
}

Reactive RxJS
After 5 second
RxJS2
In the above example, we are importing Rxjs “Interval” module and using the interval module as a setTimeout function. This line interval(6000).subscribe(x => this.title = ”); calls after every 5 seconds. The interval can be used to display flash messages on the UI.
Rxjs Operators :

  • tap()
  • map()
  • filter()
  • concat()
  • share()
  • retry()

Leave a Reply

Your email address will not be published. Required fields are marked *