Creating a unique RXJS pipe that takes in an observable and holds off until said observable satisfies a specific criterion

Question

Creating a unique RXJS pipe that takes in an observable and holds off until said observable satisfies a specific criterion

Check out the code snippet below:

export function featureComplete(feature: BaseFeatureService) {
  return pipe(
    combineLatest([feature.loading$]),
    filter(([input, loading]) => !loading),
    map(([input, loading]) => {
      return input;
    })
  );
}

To use this function, simply modify your observable like so:

observable$.pipe(
   featureComplete(this.propertyFeatureService)
);

The combineLatest operator should be used instead of zip, as the latter is deprecated. This adjustment will ensure that your solution continues to work effectively.

If you prefer, you can also pass in an `Observable` for the waiting condition by using feature.loading$.

Thank you for considering these alternatives!

angular typescript rxjs rxjs-pipeable-operators

Answer 1

Answer №1

After exploring other operators, I stumbled upon withLatestFrom, which serves the same purpose as the zip operator mentioned earlier.

The revised code block now appears as follows:

export function featureReady(feature: BaseFeatureService) {
  return pipe(
    withLatestFrom(feature.loading$),
    filter(([inputObject, loading]) => !loading),
    map(([inputObject, loading]) => {
      return inputObject;
    })
  );
}

I will keep the question open in case someone can suggest a more efficient solution.

Answer 2

After exploring other operators, I stumbled upon withLatestFrom, which serves the same purpose as the zip operator mentioned earlier.

The revised code block now appears as follows:

export function featureReady(feature: BaseFeatureService) {
  return pipe(
    withLatestFrom(feature.loading$),
    filter(([inputObject, loading]) => !loading),
    map(([inputObject, loading]) => {
      return inputObject;
    })
  );
}

I will keep the question open in case someone can suggest a more efficient solution.

Answer 3

Answer №2

Utilizing the skipUntil Rxjs pipeable operator is recommended as it allows skipping values until a specific condition is met by the inner observable.

In the code snippet below, the source Observable will wait for the function `fun` to return a custom pipe that will continue waiting until the inner observable indicates that the loading status is false.

const { interval, timer,of,concat } = rxjs;
const {  skipUntil,delay,filter,ta } = rxjs.operators;


// TypeScript code goes here!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>Wait until the loading status is false</h1>`;

//custom pipe function which will wait until loading status is false
const fun = (wait1) =>  skipUntil(wait1.pipe(filter(status => !status['loading'])));

console.clear()
const status = [{loading:true},{loading:false}]
//emit every 1s
const source = interval(1000);

// inner obserbale which will emit the status after certain intervals
const wait1 = concat(of(status[0]).pipe(delay(1000)),of(status[1]).pipe(delay(3000))).pipe(delay(5000));
//skip emitted values from source until inner observable emits false after the loading status turns to false
const example = source.pipe(fun(wait1));

const subscribe = example.subscribe(val => appDiv.innerHTML += 'interval ' + val + '<br/>');
const subscribe1 = wait1.subscribe(val => appDiv.innerHTML += 'inner Observable status ' + val.loading + '<br/>');

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<div id="app"></div>

For the StackBlitz solution, click here.

Answer 4

Utilizing the skipUntil Rxjs pipeable operator is recommended as it allows skipping values until a specific condition is met by the inner observable.

In the code snippet below, the source Observable will wait for the function `fun` to return a custom pipe that will continue waiting until the inner observable indicates that the loading status is false.

const { interval, timer,of,concat } = rxjs;
const {  skipUntil,delay,filter,ta } = rxjs.operators;


// TypeScript code goes here!
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>Wait until the loading status is false</h1>`;

//custom pipe function which will wait until loading status is false
const fun = (wait1) =>  skipUntil(wait1.pipe(filter(status => !status['loading'])));

console.clear()
const status = [{loading:true},{loading:false}]
//emit every 1s
const source = interval(1000);

// inner obserbale which will emit the status after certain intervals
const wait1 = concat(of(status[0]).pipe(delay(1000)),of(status[1]).pipe(delay(3000))).pipe(delay(5000));
//skip emitted values from source until inner observable emits false after the loading status turns to false
const example = source.pipe(fun(wait1));

const subscribe = example.subscribe(val => appDiv.innerHTML += 'interval ' + val + '<br/>');
const subscribe1 = wait1.subscribe(val => appDiv.innerHTML += 'inner Observable status ' + val.loading + '<br/>');

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

<div id="app"></div>

For the StackBlitz solution, click here.

Creating a unique RXJS pipe that takes in an observable and holds off until said observable satisfies a specific criterion

Answer №1

Answer №2

Similar questions

Learn how to transform an object into an array consisting of multiple objects in TypeScript

Having trouble with image loading in NextJS after replacing an old image with a new one?

What is the reason for the HTTP service being activated automatically?

A function in Typescript that can handle dynamic keys and values using generics

What could be causing the malfunction when using TypeScript's generic T with any?

Optimal method for populating table filter values from query string in Typescript while handling asynchronous calls

Modifying the value of a React input component is restricted when the "value" field is utilized

generate a fresh array with matching keys

When trying to install my npm package from the registry, I keep encountering an issue despite being able to install it locally

Leveraging foreign key attributes within Angular templates

Exploring cutting-edge Angular 2 UI controls?

Converting ts files to js: A comprehensive guide

Is a loading screen necessary when setting up the Stripe API for the checkout session?

The method this.object.remove does not exist

Tips for transferring information between service functions in Angular

Unable to use console log in shorthand arrow function while working with Typescript

How is it that in TypeScript, a potential numeric value in an interface can be transformed into an impossible numeric value in a class implementation?

Is it possible to move around in an Angular SPA to different html pages without needing to create a new

Creating various import patterns and enhancing Intellisense with Typescript coding

Error in Angular 6: Unable to access property 'mapName' as it is undefined