Multiple resource API calls in Angular

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.

Continue reading...