Multiple resource API calls in Angular

Question

I am trying to understand the new Angular resource API. One typical problem is to fetch several HTTP endpoints, combine the data and use it.

My current approach looks like this:

  name = rxResource({ stream: () => this.nameService.getNameId('test') });
  build = rxResource({ stream: () => this.buildService.buildGet() });});

  // Update computed signal to use resource values
  tableData = computed(() => {
    const nameValue = this.name.value();
    const buildValue = this.build.value();

    if (!nameValue || !buildValue) {
      return null;
    }

    return {
      data: this.getTable(nameValue , buildValue ),
    };
  });

Is this the proper way to use it? Currently the computed signal is executed when either one of the resources return a value. I manually test if the value is set and only if both values are not null, the signal returns a proper value.

Is there a better way to do this? Something like combineLatest in RxJS? I would really like to stick to the signal/resource approach.

Matthieu Riegler · Accepted Answer · 2025-08-05 11:37:56Z

1

We can combine both APIs using forkJoin.

name = rxResource({ 
  stream: () => {
    return forkJoin([
      this.nameService.getNameId('test'), 
      this.buildService.buildGet(),
    ]).pipe(
      map(([nameValue, buildValue]: any) => {
        return {
          data: this.getTable(nameValue , buildValue ),
        };
      })
    );
  }
});

If one of the APIs fail, the forkJoin will fail, hence we can fetch the data from both join them and use it as a single API.

The HTML might look something like.

We can use the isLoading and error signal to get the combined result or error and loading status and show on the HTML respectively.

@if(name.isLoading()) {
  Loading...
} @else if(name.error()) {
  Unknown Error Occurred.
} @else {
  {{ name.value() | json }}
}

edited Aug 5 at 11:37

Matthieu Riegler

59.8k27 gold badges158 silver badges208 bronze badges

answered Aug 5 at 11:28

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mo3bius Aug 5 at 11:34

Yes this works. But it heavily relies on rxjs. I currently have something similiar implemented. The issue is, that I dont really use the rxResource. I could just replace it with a Behavioursubject and I would have everything in Rxjs. I really try to get away from it for these simple calls. Angular itself seems to develop in this direction so I am trying to understand the new approach.

Naren Murali Aug 5 at 11:39

@Mo3bius The power of resource comes up when you write reactivity using computed request property of resource API, compared to rxjs, resource sets up reactivity within a few lines of code. Please check out these answers resource answers to get introduced to resource API, the reactivity is the main workhorse of resource API, Angular still uses RXJS since observables are the foundation of the http API, but it could change in the future

Mo3bius Aug 5 at 11:53

Resource api might make some things a little easier, but my own rxjs approach was fine. My intial question was to consume the given http api calls (observable) and just use signals/resource api onwards. This answer does use rxjs and therefore is not a valid answer for me.

Collectives™ on Stack Overflow

Multiple resource API calls in Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related