RxJS find() Conditional Operator

RxJS find() operator is a conditional operator that returns only the first value emitted by the source observable as an output when it meets some specific conditions. It finds the first value that meets some test conditions and emits that.

In other words, we can say that the RxJS find() operator is used to return the observable when the first value of the source observable meets the condition for the predicate function taken as input.

Syntax:

Following is the syntax of the RxJS find() conditional operator:

find<T>(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): OperatorFunction<T, T | undefined>

Parameter Explanation

predicate_func: The predicate_func specifies the input given to this operator. It takes the source item and checks if it satisfies the condition given.
predicate: It specifies a function which is called with each item to test for condition matching.
thisArg: This is an optional argument used to determine its value in the predicate function. Its default value is undefined.

Return value

The RxJS find() operator returns an observable when the first value of the source observable meets with the condition for the predicate function taken as input.

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

Example 1

import { of } from 'rxjs';
import { find } from 'rxjs/operators';
let list1 = of(11, 22, 33, 44, 55, 66, 77, 88, 99);
let final_val = list1.pipe(find(x => x % 2 === 0),);
final_val.subscribe(x => console.log(x));

Output:

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

In the above example, you can see that when it gets the first value satisfying the condition form the following list: list1 = of(11, 22, 33, 44, 55, 66, 77, 88, 99);

Then, it has emitted that value as an output.

Example 2 (Find click inside a box, repeat when the click occurs outside of box)

import './style.css'; 
import { fromEvent } from 'rxjs'; 
import { find, repeatWhen, mapTo, startWith, filter} from 'rxjs/operators';
// elem ref
const status = document.getElementById('status');
// streams
const clicks$ = fromEvent(document, 'click');
clicks$
  .pipe(
    find((event: any) => event.target.id === 'box'),
    mapTo('You have Found me'),
    startWith('Hey! Find me'),
    // reset when click outside box
    repeatWhen(() =>
      clicks$.pipe(filter((event: any) => event.target.id !== 'box'))
    )
  )
  .subscribe(message => (status.innerHTML = message)); 

Output:

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