Skip, SkipUntil, SkipWhile & SkipLast Operators In Angular

The Code Points June 28, 2022 0

In this article, we will learn about the Skip, SkipUntil, SkipWhile & SkipLast Operators In Angular. Based on criteria, the skip operators in Angular skip values from the source observable. The Skip, SkipUntil, and SkipWhile commands skip the values from the source's beginning. The SkipLast Operator removes elements from the source at the conclusion.

Skip

The skip operator provides the rest of the source as an observable after skipping the first count number of values from the source observable.

Syntax

skip<t>(count: number): MonoTypeOperatorFunction<t>

Skip Example

The sample below skips the first 5 values and leaves the rest of the observable alone.

import { Component } from "@angular/core";
import { skip } from "rxjs/operators";
import { interval, of } from "rxjs";
 
@Component({
  selector: "my-app",
  template: `
    <h1>Skip Example</h1>
 
    <br />
    <br />
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  ngOnInit() {
    of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
      .pipe(
        skip(5),
      )
      .subscribe(val => console.log(val));
  }
}
 
 
** Console **
6
7
8
9
10

SkipWhile

While the supplied condition is true, the SkipWhile operator skips values from the source observable. When the condition is false, however, it begins to emit values and continues to do so even if the condition is restored to true.

Syntax

skipWhile<t>(predicate: (value: T, index: number) => boolean): MonoTypeOperatorFunction<t>

SkipWhile Example

of( 2, 4, 5, 6, 7, 8, 9, 10)
  .pipe(
    skipWhile(val => val % 2==0),
  )
  .subscribe(val => console.log(val));

 
**Console**
5
6
7
8
9
10

Filter Vs SkipWhile

A predicate is used by the Filter and SkipWhile operators to filter out values.

If the predicate is true, the SkipWhile skips the values; if the predicate is true, the filter emits the values.

The SkipWhile stops using the predicate once it turns false and emits all the remaining values. The filter continues to use the predicate to eliminate the remaining values.

Filter Example

import { Component } from "@angular/core";
import { filter } from "rxjs/operators";
import { interval, of, timer } from "rxjs";
 
@Component({
  selector: "my-app",
  template: `
    <h1>Filter Example</h1>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  ngOnInit() {
    of(2, 4, 5, 6, 7, 8, 9, 10)
      .pipe(
        filter(val => {
          return val %2==0;
        }),
      )
      .subscribe(val => console.log(val));
  }
}
 
 
***Console***
2
4
6
8
10

SkipUntil

As long as the second observable does not emit any value, the SkipUntil operator skips the values from the source observable. However, once the second observable emits a value, it continues to emit values as long as the source generates values.

It's identical to SkipWhile, but the condition is provided through a different observable.

Syntax

skipUntil<t>(notifier: Observable<any>): MonoTypeOperatorFunction<t>

SkipUntil Example

The interval produces an observable that emits a value every 1000 milliseconds. The timer(6000) observable is used by the SkipUntil operator, which emits a value after 6000ms. As a result, the SkipUntil function skips the first 5 values (0 to 4) and continues emitting data from 5 onwards.

interval(1000)
  .pipe(
    skipUntil(timer(6000)),
  )
  .subscribe(val => console.log(val));
 
***Console **
5
6
7
8
....

SkipLast

The SkipLast operator provides the rest of the source as an observable after skipping the last count number of items from the source observable.

It's the inverse of the skip(count), which skips the first count of values.

Syntax

skipLast<t>(count: number): MonoTypeOperatorFunction<t>

SkipLast Example

The skiplast(5) command will skip the last 5 values in the following example (i.e 6 to 10).

of(1,2,3,4,5,6,7,8,9,10)
  .pipe(
    skipLast(5)
  )
  .subscribe(val => console.log(val));
 
**Console*
1
2
3
4
5

SkipLast delays the values

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

The skipLast does not emit any values until the value 5 in the example above. It emits the value 1 when it gets the value 6. Using the tap operator, you can see it.

of(1,2,3,4,5,6,7,8,9,10)
  .pipe(
    tap(val => {
      console.log("tap " + val);
    }),
    skipLast(5)
  )
  .subscribe(val => console.log(val));
 
 
**Console**
tap 1
tap 2
tap 3
tap 4
tap 5
tap 6
1
tap 7
2
tap 8
3
tap 9
4
tap 10
5

Conclusion

In this article, we learned about the Skip, SkipUntil, SkipWhile & SkipLast Operators and how to use them in Angular.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.