Angular + RxJS filter

By Arvind Rai, 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';

Here we will discuss RxJS filter with examples step by step.

1. Using RxJS filter

RxJS filter 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(","))
);

In the above code, if value emitted by 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));

3. Filter values for null.

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 provides retry 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 Array filter 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));

Find the output.

1 
2 
3 
4
Even Number: 2 
Even Number: 4

b. RxJS 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(" | ")));

Find the output.