RxJS (Reactive Extensions for JavaScript) — Webner Blog
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 :
- Bundle size is smaller as compared to Rxjs version 5.
- The performance of the latest version is better.
- 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 = '');
}
}
After 5 second
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 :
Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.
Originally published at https://blog.webnersolutions.com on July 22, 2020.
