DEV Community

Cover image for You can pass a predicate to RxJS’s first() operator, I was not aware!
Leonel Elimpe
Leonel Elimpe

Posted on • Originally published at leonelngande.com on

You can pass a predicate to RxJS’s first() operator, I was not aware!

My typical use-case for RxJS first() operator is to emit only the first item of an observable stream. What if you want the first value based on a certain condition instead?

I recently found out you can pass in an optional callback function (predicate) just for this.

First

emit only the first item (or the first item that meets some condition) emitted by an Observable.

predicate is a function you write to evaluate an expression and return true or false. You can have a look at it’s source here.

export function first<T, D = T>(
  predicate: (value: T, index: number, source: Observable<T>) => boolean,
  defaultValue?: D
): OperatorFunction<T, T | D>;

Enter fullscreen mode Exit fullscreen mode

As an example, say we setup a listener for DOM click events.

const clicks = fromEvent(document, 'click');

We later decide we’d like to receive only the first click event that happens on a DIV, here’s how we’ll do that:

import { fromEvent } from 'rxjs';
import { first } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');

const result = clicks.pipe(first(ev => ev.target.tagName === 'DIV'));

result.subscribe(x => console.log(x));

Enter fullscreen mode Exit fullscreen mode

As seen above, we make use of the first() operator passing it a callback function that receives a click event, and returns true if the tag name is DIV, false otherwise.

Hopefully, like me, you’ve learned something new from this tiny blog post 🙂.

Top comments (0)