first

Emits only the first value (or the first value that meets some condition) emitted by the source Observable.

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

Parameters

predicate	(value: T, index: number, source: Observable<T>) => boolean	Optional. Default is undefined. An optional function called with each item to test for condition matching.
defaultValue	D	Optional. Default is undefined. The default value emitted in case no valid value was found on the source.

Returns

OperatorFunction<T, T | D>: A function that returns an Observable that emits the first item that matches the condition.

Throws

EmptyError Delivers an EmptyError to the Observer's error callback if the Observable completes before any next notification was sent. This is how first() is different from take(1) which completes instead.

Description

Emits only the first value. Or emits only the first value that passes some test.

If called with no arguments, first emits the first value of the source Observable, then completes. If called with a predicate function, first emits the first value of the source that matches the specified condition. Throws an error if defaultValue was not provided and a matching element is not found.

Examples

Emit only the first click that happens on the DOM

import { fromEvent, first } from 'rxjs';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(first());
result.subscribe(x => console.log(x));

Emits the first click that happens on a DIV

import { fromEvent, first } from 'rxjs';

const div = document.createElement('div');
div.style.cssText = 'width: 200px; height: 200px; background: #09c;';
document.body.appendChild(div);

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(first(ev => (<HTMLElement>ev.target).tagName === 'DIV'));
result.subscribe(x => console.log(x));

Overloads

first(predicate?: null, defaultValue?: D): OperatorFunction<T, T | D>

Parameters

predicate	null	Optional. Default is undefined.
defaultValue	D	Optional. Default is undefined.

Returns

OperatorFunction<T, T | D>

first(predicate: BooleanConstructor): OperatorFunction<T, TruthyTypesOf<T>>

Parameters

predicate

BooleanConstructor

Returns

OperatorFunction<T, TruthyTypesOf<T>>

first(predicate: BooleanConstructor, defaultValue: D): OperatorFunction<T, TruthyTypesOf<T> | D>

Parameters

predicate	BooleanConstructor
defaultValue	D

Returns

OperatorFunction<T, TruthyTypesOf<T> | D>

first(predicate: (value: T, index: number, source: Observable<T>) => value is S, defaultValue?: S): OperatorFunction<T, S>

Parameters

predicate	(value: T, index: number, source: Observable<T>) => value is S
defaultValue	S	Optional. Default is undefined.

Returns

OperatorFunction<T, S>

first(predicate: (value: T, index: number, source: Observable<T>) => value is S, defaultValue: D): OperatorFunction<T, S | D>

Parameters

predicate	(value: T, index: number, source: Observable<T>) => value is S
defaultValue	D

Returns

OperatorFunction<T, S | D>

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

Parameters

predicate	(value: T, index: number, source: Observable<T>) => boolean
defaultValue	D	Optional. Default is undefined.

Returns

OperatorFunction<T, T | D>

See Also

• filter
• find
• take