RxJS filter() Filtering Operator

RxJS filter() operator is a filtering operator used to filter items emitted by the source observable according to the predicate function. It only emits those values that satisfy a specified predicate.

The RxJS filter() operator is like the well-known Array Array .prototype.filter() method. This operator takes values from the source Observable, passes them through a predicate function and only emits those values that get TRUE.

Syntax:

Following is the syntax of the RxJS filter() operator:

filter<T>(predicate: (value: T, index: number) => boolean, thisArg?: any): MonoTypeOperatorFunction<T>

Parameter Explanation

predicate_func: The predicate_func returns a boolean value, and the output will get filtered if the function returns a truthy value.
predicate: It is used to specify a function that evaluates each value emitted by the source observable. If it returns true, the value is emitted, if false, the value is not passed to the output observable. The index parameter is the number i for the i-th source emission that has happened since the subscription, starting from the number 0.
thisArg: It is an optional argument used to determine the value of this in the predicate function. Its default value is undefined.

Return value

The RxJS filter() operator's return value is observable of values from the source observable satisfied by the predicate function.

Let us see some examples of the RxJS filter() operator to understand it clearly.

Example 1 (Filter for even numbers)

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
const source = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
//filter out non-even numbers
const example = source.pipe(filter(num => num % 2 === 0));
const subscribe = example.subscribe(val => console.log(`Even number: ${val}`));

Output:

After executing the above example, you will see the following result as array:

In the above example, you can see that we have filtered the even numbers using the filter() operator.

Example 2 (Filter objects according to their property)

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
const source = from([
  { name: 'Alex', age: 32 },
  { name: 'Akira', age: 25 },
  { name: 'Aisha', age: 23 },
  { name: 'Anisha', age: 16 },
  { name: 'Anisha', age: 19 },
  { name: 'Alisha', age: 22 }
]);
const example = source.pipe(filter(person => person.age <= 25));
const subscribe = example.subscribe(val => console.log(`Under the age of 25: ${val.name}`));

Output:

After executing the above example, you will see the following result as array:

Here, you can see that the RxJS filter() operator has emitted peoples only under the age of 25.

Example 3 (Filter numbers greater than a specified value after an interval)

import { interval } from 'rxjs';
import { filter } from 'rxjs/operators';
//emit every second
const source = interval(1000);
//filter out all values until interval is greater than 3
const example = source.pipe(filter(num => num > 3));
const subscribe = example.subscribe(val =>
  console.log(`Number greater than 3: ${val}`)
);

Output:

After executing the above example, you will see the following result as ArrayArray: