Merge three asynchronous tasks into a single observable stream

Question

Merge three asynchronous tasks into a single observable stream

I have 3 different observables that I am using to filter the HTML content.

Here is the TypeScript code snippet:

   fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);

All of these observables return a type of Observable<boolean>.

I then use them in filtering the HTML elements with the [disabled] attribute like so:

<button class="btn btn-primary font-weight-700 font-size-200" [disabled]="(isReportLoading$ | async) || (fiscalYear$ | async) < 2022 || (isLoading$ | async) " (click)="clickExport()">
          {{ 'homepage.export' | translate }}
          <mat-icon class="btn-icon export-icon" svgIcon="export"></mat-icon>
        </button>

I attempted to combine these observables into one using the following approach:

get isExportAvialable$ {
    return combineLatest(this.fiscalYear$, this.isLoading$, this.isReportLoading$, (fiscalYear, isLoading, isReportLoading) => isReportLoading || fiscalYear < 2022 || isLoading);
  }

However, I encountered an error with the condition fiscalYear < 2022.

Can you suggest a way to combine these observables into a single one using asynchronous operations?

javascript angular typescript ngrx

Answer 1

Answer №1

To tackle the issue, follow these steps:

fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);
isExportAvailable$ = combineLatest([
    this.fiscalYear$, 
    this.isLoading$, 
    this.isReportLoading$
]).pipe(map(([year, isLoading, isReportLoading]) => return year < 2022 && isLoading && isReportLoading));

Finally, in your template, simply utilize isExportAvailable$ along with the async pipe.

Answer 2

To tackle the issue, follow these steps:

fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);
isExportAvailable$ = combineLatest([
    this.fiscalYear$, 
    this.isLoading$, 
    this.isReportLoading$
]).pipe(map(([year, isLoading, isReportLoading]) => return year < 2022 && isLoading && isReportLoading));

Finally, in your template, simply utilize isExportAvailable$ along with the async pipe.

Merge three asynchronous tasks into a single observable stream

Answer №1

Similar questions

Using the Vuex getter to populate a component with data using the v-for directive

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

Learn the step-by-step process of graphing equations in React similar to Desmos

What is the best way to show only the weekdays on the x-axis?

Converting JSON data to an array using an Ajax request

The Angular array stays undefined when JSON data is being passed

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

The node sends a request to the API to retrieve data, which is then stored in an array. Subsequently, another request is

Experiencing an issue in Test Cafe when attempting to click on an invisible link using the Client Function

Ways to quickly terminate a pipeline in a JavaScript transformation

Developing a Next.js application using Typescript can become problematic when attempting to build an asynchronous homepage that fetches query string values

Leveraging google transliteration within a Flex environment

A guide on sending multiple input values using the same class name or id through ajax

Angular 6 throws an error stating: "The property 'push' cannot be read of null."

Angular is intercepting HTTP subscriptions without finalizing them

How can I create a fading trail effect in Three.js that diminishes over time?

Changing table data using a switch in mui-datatables when my information is stored as boolean values

Utilizing a Typescript class interface does not maintain the original method types

"Capture input value changes and display the previous value when submitting a post. See an example of

Node.js application experiences a delay when calling Mongoose Model.save()