Is there a way to subscribe to various observables simultaneously in Angular 2, and then pause until fresh data is available on each of them?

Question

Is there a way to subscribe to various observables simultaneously in Angular 2, and then pause until fresh data is available on each of them?

I have an Angular component that relies on 3 services, each of which has an observer I can subscribe to. The view of the component needs to be updated whenever there are changes in the observed data, which occurs through websockets (feathers.js). I want the method

doSomethingWithTheNewDataThatIsShownOnView()

to only be called once during ngInit, and I believe I can achieve this with forkJoin:

private ngOnInit(): void {
    Observable.forkJoin(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
          this.doSomethingWithTheNewDataThatIsShownOnView();
          this.ref.markForCheck();
        },
        err => console.error(err)
    );

    this.filesService.find();
    this.processesService.find();
}

This implementation works as expected, but if there are updates in the inputs$ or outputs$ Observables, the subscription is not triggered again. It only gets triggered when all three Observables have new data. Is there a way to "wait for a 100ms interval to see if all three observables have received new data, and if not, use the individual new data from each observable until now?"

I hope my intention is clear :D

Regards,

Chris

angular typescript rxjs reactive-programming observable

Answer 1

Answer №1

combineLatest() is the solution you are looking for:

private initialize(): void {
    Observable.combineLatest(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
          this.doSomethingWithDataShownOnView();
          this.ref.markForCheck();
        },
        err => console.error(err)
    );

    this.filesService.find();
    this.processesService.find();
}

Here are some suggestions for improving your code:

Instead of combineLatest(), you can also provide an optional aggregation method. Also, consider using pure functions and avoiding stateful components like this.inputs and this.outputs. Instead, utilize the | async pipe in the template to handle subscriptions automatically:

autoUpdatedData$ = Observable.combineLatest(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$,
        (inputs, outputs, items) => ({inputs, outputs, items})
    )
    .map(({inputs, outputs, items}) => {
        return this.doSomethingWithDataShownOnView(inputs, outputs, items);
    });

private initialize(): void {
    this.filesService.find();
    this.processesService.find();
}

// in your template
<div>{{autoUpdatedData$ | async}}</div>

Answer 2

combineLatest() is the solution you are looking for:

private initialize(): void {
    Observable.combineLatest(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
          this.doSomethingWithDataShownOnView();
          this.ref.markForCheck();
        },
        err => console.error(err)
    );

    this.filesService.find();
    this.processesService.find();
}

Here are some suggestions for improving your code:

Instead of combineLatest(), you can also provide an optional aggregation method. Also, consider using pure functions and avoiding stateful components like this.inputs and this.outputs. Instead, utilize the | async pipe in the template to handle subscriptions automatically:

autoUpdatedData$ = Observable.combineLatest(
        this.filesService.inputs$,
        this.filesService.outputs$,
        this.processesService.items$,
        (inputs, outputs, items) => ({inputs, outputs, items})
    )
    .map(({inputs, outputs, items}) => {
        return this.doSomethingWithDataShownOnView(inputs, outputs, items);
    });

private initialize(): void {
    this.filesService.find();
    this.processesService.find();
}

// in your template
<div>{{autoUpdatedData$ | async}}</div>

Is there a way to subscribe to various observables simultaneously in Angular 2, and then pause until fresh data is available on each of them?

Answer №1

Similar questions

Find all objects in an array that have a date property greater than today's date and return them

Modifications to the toolbar styling are made by the Angular Material mat-form-field

The selected check icon does not appear in the console log

Display a customized modal showcasing the data of a particular user

TS2304: 'Omit' is a mysterious being that cannot be located

Generating a UTC timestamp in TypeScript

Encountering issues with installing packages while creating a new Angular 9 project

Returning a value with an `any` type without proper validation.eslint@typescript-eslint/no-unsafe-return

Tips for displaying the string value of an elementFinder when encountering an error in protractor

When attempting to showcase an image within an Angular form, the error message "Form control with unspecified name attribute lacks a value accessor" is displayed

What are the different ways to customize the appearance of embedded Power BI reports?

Ways to effectively test public functions in Typescript when using react-testing-library

I'm having trouble with the ts extension in Angular 2 when using http.get command

Issues arise with transferring React component between different projects

Adjust ion-select label width across the entire screen in Ionic version 6

Using ng-bootstrap in Angular to filter a JSON object for a typeahead feature

Creating an HTTP method handler function in Next.js API routes with an unspecified number of generic parameters

The combination of Angular's ngrx and Router.Events within Rxjs does not seem to function as intended

What causes old data to linger in component and how to effectively clear it out

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?