Post
Ask Question

skipUntil and skipWhile Operator in Angular

Introduction

The skipUntil() and skipWhile() operators in RxJS are used to control when values emitted by an observable are propagated to subscribers based on certain conditions. These operators are commonly used in Angular applications to filter out or delay emissions from observables based on specific criteria. Let's explore each operator in detail with examples.

skipUntil()

The skipUntil() operator ignores values emitted by the source observable until a second "notifier" observable emits its first value. Once the notifier emits, skipUntil() begins forwarding values from the source observable to subscribers.

Example

Suppose you have an observable that emits numbers every second and a notifier observable that emits a value after 5 seconds. You can use skipUntil() to skip the initial emissions until the notifier emits its first value.

import { interval, timer } from 'rxjs';
import { skipUntil } from 'rxjs/operators';

// Source observable emitting numbers every second
const sourceObservable = interval(1000);

// Notifier observable emitting a value after 5 seconds
const notifierObservable = timer(5000);

// Use skipUntil to ignore emissions from source until notifier emits
sourceObservable.pipe(
  skipUntil(notifierObservable)
).subscribe(
  value => console.log('Received value:', value)
);

In this example

  • sourceObservable emits numbers (0, 1, 2, 3, ...) every second.
  • notifierObservable emits a value after 5 seconds.
  • skipUntil(notifierObservable) delays forwarding emissions from sourceObservable until notifierObservable emits its first value (after 5 seconds). After that, all subsequent emissions from sourceObservable are forwarded to the subscriber.

skipWhile()

The skipWhile() operator ignores values emitted by the source observable until a specified condition becomes false. Once the condition is false for the first time, skipWhile() begins forwarding values from the source observable to subscribers.

Example

Suppose you have an observable that emits numbers and you want to skip values until a number greater than 5 is emitted. You can use skipWhile() to achieve this.

import { of } from 'rxjs';
import { skipWhile } from 'rxjs/operators';

// Source observable emitting numbers
const sourceObservable = of(1, 2, 3, 7, 8, 4, 9);

// Use skipWhile to skip emissions until a number greater than 5 is emitted
sourceObservable.pipe(
  skipWhile(value => value <= 5)
).subscribe(
  value => console.log('Received value:', value)
);

In this example

  • sourceObservable emits a sequence of numbers (1, 2, 3, 7, 8, 4, 9).
  • skipWhile(value => value <= 5) skips emitting values from sourceObservable until it encounters a number greater than 5 (7). After that, all subsequent emissions (7, 8, 4, 9) are forwarded to the subscriber.

Summary

  • skipUntil(): Ignores emissions from the source observable until a specified "notifier" observable emits its first value, after which all subsequent emissions are forwarded.
  • skipWhile(): Ignores emissions from the source observable until a specified condition becomes false for the first time, after which all subsequent emissions are forwarded.

These operators are useful for controlling when values emitted by observables are propagated based on specific conditions or trigger events. They allow you to filter out unwanted emissions and focus on relevant data streams in Angular applications, improving efficiency and control over observable streams.


Similar Articles