Post
Ask Question

RXJS Operators Used in Angular

Introduction

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables, which are a powerful way to manage asynchronous and event-driven code. In Angular, RxJS is commonly used for handling asynchronous operations, such as HTTP requests and user input.

Here are some commonly used RxJS operators in Angular:

map

Transforms the items emitted by an Observable by applying a function to each item.

import { map } from 'rxjs/operators';

// Example:
observable.pipe(
  map(data => data * 2)
);

filter

Emits only those items from an Observable that pass a specified condition.

import { filter } from 'rxjs/operators';

// Example:
observable.pipe(
  filter(data => data > 5)
);

tap (do)

Perform a side effect for every emission on the source Observable, but return an Observable that is identical to the source.

import { tap } from 'rxjs/operators';

// Example:
observable.pipe(
  tap(data => console.log(data))
);

switchMap

Projects each source value to an Observable, flattens the emissions into a single Observable.

import { switchMap } from 'rxjs/operators';

// Example:
observable.pipe(
  switchMap(data => newObservable)
);

mergeMap (flatMap)

Maps each value to an Observable and then flattens all of these inner Observables.

import { mergeMap } from 'rxjs/operators';

// Example:
observable.pipe(
  mergeMap(data => newObservable)
);

catchError (catch)

Catches errors on the observable and replaces the error with another observable.

import { catchError } from 'rxjs/operators';

// Example:
observable.pipe(
  catchError(error => handleError)
);

debounceTime

Emits a value from the source Observable only after a specified time period has passed without another source emission.

import { debounceTime } from 'rxjs/operators';

// Example:
observable.pipe(
  debounceTime(300)
);

distinctUntilChanged

Only emits when the current value is different from the previous one.

import { distinctUntilChanged } from 'rxjs/operators';

// Example:
observable.pipe(
  distinctUntilChanged()
);

forkJoin

forkJoin is an RxJS operator that allows you to perform multiple HTTP requests or other asynchronous operations in parallel and then combine their results into a single observable.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="data">
      <p>Data from API 1: {{ data[0] }}</p>
      <p>Data from API 2: {{ data[1] }}</p>
    </div>
  `,
})
export class ExampleComponent implements OnInit {
  data: any[];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Make multiple HTTP requests in parallel using forkJoin
    const api1$ = this.http.get('https://api.example.com/data1');
    const api2$ = this.http.get('https://api.example.com/data2');

    forkJoin([api1$, api2$]).subscribe(
      (results) => {
        // results[0] is the result of the first HTTP request
        // results[1] is the result of the second HTTP request
        this.data = results;
      },
      (error) => {
        console.error('Error:', error);
      }
    );
  }
}

Conclusion

These are just a few examples, and there are many more RxJS operators available for various use cases. Understanding and effectively using RxJS operators is crucial for handling complex asynchronous scenarios in Angular applications.


Similar Articles