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.
Table of Contents
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
1 2 3 | skip<T>(count: number): MonoTypeOperatorFunction<T> |
Skip Example
The example below skip(5) ignores the first 5 values & returns the rest of the observable as it is.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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
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
1 2 3 | skipWhile<T>(predicate: (value: T, index: number) => boolean): MonoTypeOperatorFunction<T> |
SkipWhile Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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
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
1 2 3 | skipUntil<T>(notifier: Observable<any>): MonoTypeOperatorFunction<T> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | interval(1000) .pipe( skipUntil(timer(6000)), ) .subscribe(val => console.log(val)); ***Console ** 5 6 7 8 .... |
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
1 2 3 | skipLast<T>(count: number): MonoTypeOperatorFunction<T> |
SkipLast Example
In the following example, the skiplast(5) will skip the last 5 values (i.e 6 to 10)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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 |
Reference
Read More
On a side note, those operators come from RxJs, not Angular.
Thanks for this very useful tutorial for Angular – I’ve been looking for something like this for ages!