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

Tips For Implementing Pagination in Laravel 5.8 with Angular 8

Leveraging getStaticProps in Next.js

Absent observable functions in the RxJS 5.0.0-beta.0 release

Unable to connect to the directive even after adding it as an input

Developing an Observer and sending updates to my followers

Issue with displaying error message and disabling button as Keyup event fails to trigger

I'm encountering a 404 error on Next.js localhost:3000

How to Modify CSS in Angular 6 for Another Element in ngFor Loop Using Renderer2

Struggling to refine the result set using jsonpath-plus

Utilizing Typescript and Jest to prevent type errors in mocked functions

Issue with ToggleButtonGroup causing React MUI Collapse to malfunction

Steps for personalizing the dataset on a PrimeNG bar graph

How do I inform Jest that spaces should be recognized as spaces?

Struggling with the @typescript-eslint/no-var-requires error when trying to include @axe-core/react? Here's a step-by

The minimum and maximum limits of the Ionic datepicker do not function properly when selecting the month and day

Angular component name constraints - 'the selector [your component name] is not permissible'

"Looking to personalize marker clusters using ngx-leaflet.markercluster? Let's explore some ways to customize

Using ngIf to locate a substring

Guide on refreshing an Angular 2 application after a user has logged out

Oops! It seems like there is an issue with the Renderer2 provider in Angular v 4.1.3