Angular + RxJS filter
January 25, 2024
This page will walk through Angular RxJS filter example. RxJS filter
filters values emitted by source Observable
. We need to pass a predicate to filter
as an argument and if predicate returns true, only when filter
will emit value. The values of source Observable
for which predicate returns false , will not be emitted by filter
. Angular 6 integrates RxJS 6 which has been shipped with pipeable operators that is used independent of Observable
. RxJS pipeable operators are used independent of Observable
within the pipe
method of Observable
. RxJS filter
is imported as following.
import { filter } from 'rxjs/operators';
filter
with examples step by step.
1. Using RxJS filter
RxJSfilter
is used to filter values emitted by source Observable
on the basis of given predicate. If the condition returns true, filter
will emit value obtained from source Observable
otherwise not. Find the some usability of RxJS filter
operator.
1. Filter value on the basis of given character.
this.stdNames$ = this.filterDemoService.getStdNames().pipe( filter(data => data.indexOf(",") > 0), map(res => res.split(",")) );
Observable
returned by getStdNames()
has no (",") character, then it will not pass source Observable
to map
operator.
2. Filter numbers on the basis of odd/even.
this.filterDemoService.getNumbers().pipe( tap(n => console.log(n)), filter(n => n % 2 === 0), map(n => n + 10), scan((sum, n) => sum + n) ) .subscribe(result => console.log(result));
this.countryName$ = this.filterDemoService.getCountry().pipe( filter(country => country.getCountryName() !== null), map(country => country.getCountryName()), catchError(err => { console.error(err); return of(""); }) );
2. Error Handling and RxJS filter
RxJS providesretry
and catchError
operators for error handling in Angular. We can use catchError
with filter
and if there is any error in filter
, it will be handled by catchError
. Find the sample example of filter
with error handling.
this.filterDemoService.getCountry().pipe( retry(2), filter(country => country.getCountryStates().length > 0), map(country => country.getCountryStates()), catchError(err => { console.error(err); return of([]); }) ) .subscribe(res => this.countryStates = res);
3. JavaScript Array filter vs RxJS filter
JavaScript Arrayfilter
works on element of JavaScript Array and RxJS filter
is the RxJS operator that works on element emitted by Observable
.
a. JavaScript Array
filter
filters the array by applying given predicate to each element of the array and the element for which predicate returns true, will remain in output array.
Suppose we have an array as following.
let numArray = [1, 2, 3, 4];
Find the sample example of JavaScript Array filter
.
numArray.filter(n => {
console.log(n);
return n % 2 === 0;
})
.forEach(el => console.log("Even Number: " +el));
1 2 3 4 Even Number: 2 Even Number: 4
filter
filters the values emitted by Observable
. Find the code to use RxJS filter
.
of(numArray).pipe( filter(dataArray => { console.log(dataArray); return dataArray.length > 0; }) ).subscribe(resArray => console.log(resArray.join(" | ")));
Array(4) [ 1, 2, 3, 4 ] 1 | 2 | 3 | 4