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

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.

Source Code

Emits the first value that matches

Source Code

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

Source Code

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

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

The following emits the default value 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

  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.

Source Code

Emits the last value that matches the predicate

Source Code

Returns an error as no value matches the condition.

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

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

The following emits the default value 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

Where
predicate is the condition

Examples

Emits 3 as it matches the condition.

Source Code

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

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

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

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

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

Source is empty, Hence it raises error notification.

References

  1. first
  2. last
  3. single

2 thoughts on “First, Last & Single Operator in Angular Observable”

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top