First, Last & Single Operator in Angular Observable

In the tutorial, let us learn the First, Last & Single RxJs operators in Angular Observable. All three operators use the predicate (condition) to check the values of the source observable. The first emits the first matching value, the Last emits the last matching value & the Single emits only if a single value matches the predicate.

First Operator

The first operator emits the first value that meets the condition. If no condition is specified, then it will emit the first value it receives.

Syntax

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

Where
predicate: is the condition to match
defaultValue: is the value to emit if no value matches the condition

1. Emits the first value if no predicate is present
2. Emits the first matching value if the predicate is present
3. Closes the stream after emitting a value
4. If the source completes before emitting any matching value, then it raises the error notification.

Example

In the following example, we create an observable using the of operator. The first operator here emits the first value it receives i.e 1 and then it completes.

import { Component, VERSION } from "@angular/core";
import { timer, interval, of } from "rxjs";
import { first } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  src = of(1, 2, 3, 4, 5).pipe(first());

  id = Date.now();

  constructor() {}

  ngOnInit() {
    console.log("Component Created " + this.id);

    this.src.subscribe(value => {
      console.log(value);
    });
  }
}


*** Result ****
1

Source Code

Emits the first value that matches

src = of(1, 2, 3, 4, 5).pipe(first(val => val > 3));


**Result** 
4

Source Code

The following code returns an error as no value matches the condition.

src = of(1, 2, 3, 4, 5).pipe(first(val => val > 10));


***Error
no elements in sequence

Source Code

But first with the default value, will emit the default value if no value matches the condition.

src = of(1, 2, 3, 4, 5).pipe(first(val => val > 10,100));


***Console**
100

The following also results in an error, as the source does not emit any values

src = of().pipe(first());


***Error
no elements in sequence

The following emits the default value 100

src = of().pipe(first(val => true, 100));


***Console
100

First Vs Take(1)

The first() (without condition & default value) and take(1) returns the first value they receive from the source and closes the observable.

But they have a difference in behavior when the source does not emit anything. The first() send an error notification, while take(1) will not emit anything, but closes the observable.

Last Operator

The last operator emits the last value that meets the condition. If no condition is specified, then it will emit the last value it receives.

Syntax

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

1. Waits for the source to complete before emitting the value
2. Emits the last value if no predicate is present
3. Emits the last matching value if the predicate is present
4. Closes the stream after emitting a value
5. If the source completes before emitting any matching value, then It raises the error notification.

Example

In the following example, we create an observable using the of operator. The last operator here emits the last value it receives i.e 5 and then it completes.

import { Component, VERSION } from "@angular/core";
import { timer, interval, of } from "rxjs";
import { last } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  src = of(1, 2, 3, 4, 5).pipe(last());

  id = Date.now();

  constructor() {}

  ngOnInit() {
    console.log("Component Created " + this.id);

    this.src.subscribe(value => {
      console.log(value);
    });
  }
}

**Console **
5

Source Code

Emits the last value that matches the predicate

src = of(1, 2, 3, 4, 5).pipe(last(val => val < 3));


***Console**
2

Source Code

Returns an error as no value matches the condition.

src = of(1, 2, 3, 4, 5).pipe(last(val => val < 0));


*** Console *****
ERROR
Error: no elements in sequence

But with a default value, it will emit the default value if no value matches the condition.

src = of(1, 2, 3, 4, 5).pipe(last(val => val < 0,0));


***Console**
100

The following also results in an error, as the source does not emit any values

src = of().pipe(last());

***Error
no elements in sequence

The following emits the default value 100

src = of().pipe(last(val => true, 100));


***Console
100

Last Vs TakeLast(1)

The last() (without condition & default value) and takeLast(1) returns the last value they receive from the source observable.

But they have a difference in behavior when the source does not emit anything. The last() send an error notification, while takeLast(1) will not emit anything, but closes the observable.

Single

The Single operator emits a single value that meets the condition.

1. The Single operator waits for the source to complete before emitting the value
2. Emits a single value that meets the condition
3. If more than one value satisfies the condition, then it raises an error notification
4. If no value satisfies the condition, then it emits the value undefined
5. Raises the error notification, if the source does not emit any value.

Syntax

single<T>(predicate?: (value: T, index: number, source: Observable<T>) => boolean): MonoTypeOperatorFunction<T>

Where
predicate is the condition

Examples

Emits 3 as it matches the condition.

src = of(1, 2, 3, 4, 5).pipe(single(val => val == 3));


**Console
3

Source Code

Waits for the observable to finish. Hence the following will never emit a value.

src = interval(1000).pipe(single(val => val == 3));

**Console*

Raises error notification as there are more than one value that satisfies the condition.

src = of(1, 2, 3, 4, 3).pipe(single(val => val == 3));


**Console**
ERROR
Sequence contains more than one element

If the source does not emit any matching values, then the Single operator emits undefined. Note that it does not emit error notification.

src = of(1, 2, 3, 4, 3).pipe(single(val => val == 5));

*Console*
undefined

Single without any predicate matches all values. Hence the error.

src = of(1, 2, 3, 4, 3).pipe(single());

***Console***
ERROR
Sequence contains more than one element

Source contains single value and Single without predicate. Emits the value

src = of(1).pipe(single());

**Console**
1

Source is empty, Hence it raises error notification.

src = of().pipe(single());


**Console***
ERROR
Error: no elements in sequence

References

1. first
2. last
3. single