Skip, SkipUntil, SkipWhile & SkipLast Operators in Angular

The skip operators in Angular skips the values from the source observable based on a condition. The Skip, SkipUntil, SkipWhile skips the values from the start of the source. The SkipLast Operator skips elements from the end of the source.

Skip

The skip operator skips the first count number of values from the source observable and returns the rest of the source as an observable

Syntax

Skip Example

The example below skip(5) ignores the first 5 values & returns the rest of the observable as it is.

Source Code

SkipWhile

The SkipWhile operator skips values from the source observable as long as the specified condition is true. But once the condition becomes false, it starts to emit the values and continues to do so even if the condition becomes true again.

Syntax

SkipWhile Example

Filter Vs SkipWhile

The Filter operator and SkipWhile operator uses a predicate to filter out the values.

The SkipWhile skips the values if the predicate is true, While the filter emits the values if the predicate is true.

Once the predicate becomes false, the SkipWhile stops using the predicate and emits all the remaining values. The filter keeps using the predicate to filter out the remaining values.

Filter Example

SkipUntil

The SkipUntil operator skips the values from the source observable as long as the second observable does not emit any value. But once the second observable emits a value, it starts to emit the values and continues to do so as long as the source emits values.

It is very similar to SkipWhile except that the condition is provided by another observable.

Syntax

SkipUntil Example

The interval creates an observable, which emits a value for every 1000 ms. The SkipUntil operator uses the timer(6000) observable, which emits a value after 6000ms. Hence the SkipUntil skips the first 5 values (0 to 4) and starts to emit the values from 5

Source Code

SkipLast

The SkipLast operator skips the last count number of values from the source observable and returns the rest of the source as an observable.

It is exactly opposite of skip(count), which skips the first count number of values

Syntax

SkipLast Example

In the following example, the skiplast(5) will skip the last 5 values (i.e 6 to 10)

Source Code

SkipLast delays the values

SkipLast(count) waits until it receives the count number of values from the source, before it starts emitting the values.

In the above example, the skipLast does not emit any values till the values 5. When it receives the value 6, it emits the value 1. You can see it by using the tap operator.

Reference

Read More

2 thoughts on “Skip, SkipUntil, SkipWhile & SkipLast Operators in Angular”

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