Common RxJS operators
Here’s an overview of some common RxJS operators and how they can be used in Angular:
1. map
The map operator is used to convert the values emitted by an observable into new values.. This is often used to perform some kind of data transformation.
<!-- app.component.html -->
<div>
<h1>Output Data using map operator</h1>
<ul>
<li *ngFor="let data of outputData">{{ data }}</li>
</ul>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
outputData: number[] = [];
ngOnInit() {
const observable = of(1, 2, 3, 4, 5);
observable.pipe(
map(data => data * 2)
).subscribe(data => {
this.outputData.push(data);
});
}
}
Output:
2. filter
The filter operator is used to remove values from an observable depending on a criterion.
<!-- app.component.html -->
<div>
<h1>Output Data using filter operator</h1>
<ul>
<li *ngFor="let data of outputData">{{ data }}</li>
</ul>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
outputData: number[] = [];
ngOnInit() {
const observable = of(1, 2, 3, 4, 5, 11, 13, 17, 19, 0, 5, 7);
observable.pipe(
filter(data => data > 7)
).subscribe(data => {
this.outputData.push(data);
});
}
}
Output:
3. mergeMap (flatMap)
The mergeMap operator is used to merge multiple observables into a single observable by applying a function to each emitted value and flattening the resulting observables.
<!-- app.component.html -->
<div>
<h1>Output Data using the mergeMap operator</h1>
<ul>
<li *ngFor="let data of outputData | async">{{ data }}</li>
</ul>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { mergeMap, toArray } from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
outputData: Observable<number[]>;
ngOnInit() {
const observable = of(1, 2, 3, 4, 5);
const square = (data: number) => of(data * data);
this.outputData = observable.pipe(
mergeMap((data) => {
return square(data);
}),
toArray()
);
}
}
Output:
4. combineLatest
The combineLatest operator combines the latest values from multiple observables whenever any of the observables emit a new value.
<!-- app.component.html -->
<div>
<h2>combineLatest Example</h2>
<p>Latest values from observables:</p>
<ul>
<li *ngFor="let pair of combinedValues">
{{ pair[0] }} - {{ pair[1] }}
</li>
</ul>
</div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, combineLatest, of } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
combinedValues: [number, string][] = [];
ngOnInit() {
const observable1: Observable<number> = of(1, 2, 3, 4);
const observable2: Observable<string> = of('A', 'B', 'C', 'D');
const combinedObservable: Observable<[number, string]> = combineLatest(
observable1,
observable2
);
combinedObservable.subscribe((pair) => {
this.combinedValues.push(pair);
});
}
}
Output:
RxJS operations in Angular
Angular, a popular front-end framework, helps to build responsive and scalable applications. At the core of Angular lies RxJS (Reactive Extensions for JavaScript), a powerful library for handling asynchronous operations and event-based programming. In this article, we’ll explore how RxJS helps Angular developers manage complex asynchronous tasks and streamline data flow within their applications.
Prerequisites:
Table of Content
- What are RxJS Operations?
- Uses of RxJS operations
- Common RxJS Operations in Angular
- Steps to create Angular Project
- Common RxJS operators