Table of Contents
- Introduction
- Define a PokemonPageService
- Stream Pokemons with rxResource
- Demos
- Resources
Introduction
Resource API has some changes in Angular 20.
requestwill be renamed toparams
loaderis renamed tostreamin rxResource. Therefore,streamwill be used for streaming and querying a resource.- ResourceStatus is a string union type.
In this blog post, I will show an example of using rxResource to stream Pokemons and append them to a list.
The example creates three rxResource to query and stream the Pokemons. When users click the "Load More..." button, the URL updates. The first rxResource retrieves the pokemon URLs of the specific page. The second rxResource uses the mergeMap operator to retrieve the Pokemons concurrently. When the Pokemons arrive successfully, the RxJS operator, scan, appends them to a list. The last rxResource streams the new data and the new Pokemons are shown at the end of the page.
Define a PokemonPageService
- Create a Pokemon Page Service
First, I define a PokemonPageService with a couple methods. One method pageinates the Pokemon URLS and another method retrieve the Pokemons concurrently.
The paginate method makes a request to the Pokemon API to retrieve an array of Pokemon URL.
@Injectable({
providedIn: 'root'
})
export class PokemonPageService {
private readonly http = inject(HttpClient);
paginate(url: string) {
return this.http.get<PokemonPageUrlType>(url);
}
}
The concurrentPokemons method retrieves at most three Pokemons concurrently. In the demo, the pagination retrieves five Pokemons. Three Pokemons are retrieved in parallel and returned. When the requests completed, the next two Pokemons are retrieved. The behavior is different than forkJoin that waits for all the Observables to complete before returning all the Pokemons. The user experience is better because users can see some results sooner.
@Injectable({
providedIn: 'root'
})
export class PokemonPageService {
private readonly http = inject(HttpClient);
private retrievePokemonByUrl(url: string) {
return this.http.get<PrePokemon>(url)
}
concurrentPokemons(urls: string[], concurrent=3) {
if (!urls || urls.length <=0) {
return of(undefined);
}
// The delay is added to illustrate that the next two Pokemons are retrieved when the previous batch request ends.
return from(urls).pipe(
mergeMap((url) => this.retrievePokemonByUrl(url)
.pipe(delay(800)), concurrent),
);
}
}
- Construct rxResource to Query Pokemons
The PokemonPageComponent creates a rxResource that calls the PokemonPageService whenever the url signal is updated. The request property is renamed to params and it is a reactive function that returns the value of the url signal. The loader property is renamed to stream. The function destructures the parameter and renames params to url. The url is passed to the service to obtain the Pokemons to display.
url = signal('https://pokeapi.co/api/v2/pokemon?limit=5');
pokemonPageService = inject(PokemonPageService);
// When URL updates, the rxResource retrieves a page of Pokemons
pokemonPageResource = rxResource<PokemonPageUrlType, string>({
params: () => this.url(),
stream: ({ params: url }) => this.pokemonPageService.paginate(url),
defaultValue: { ... default values ... }
});
- The
urlsignal is updated when users click the "Load More" button.
<div class="load">
<button (click)="loadNext()">Load More...</button>
</div>
After the pokemonPageResource has loaded a new page, the concurrentPokemonResource rxResource collects all the Pokemon URLs and pass them to the PokemonPageService to retrieve the Pokemons concurrently.
value = computed(() =>
this.pokemonPageResource.hasValue() ? this.pokemonPageResource.value() : undefined
);
concurrentPokemonsResource = rxResource({
params: () => this.value(),
stream: ({ params }) => {
const urls = params.results.map((r) => r.url)
return this.pokemonPageService.concurrentPokemons(urls)
}
});
The concurrentPokemonsResource is also the signal input of the PokemonListComponent.
<app-pokemon-list [pokemonsResource]="concurrentPokemonsResource" />
Next, I will show how to use rxResource to stream the Pokemons.
Stream Pokemons with rxResource
@Component({
selector: 'app-pokemon-list',
imports: [PokemonRowComponent],
templateUrl: './pokemon-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PokemonListComponent {
pokemonsResource = input.required<ResourceRef<Pokemon | undefined>>();
pokemonPagination = computed(() => this.pokemonsResource().hasValue() ?
this.pokemonsResource().value() : undefined
);
pokemonsPagination$ = toObservable(this.pokemonPagination)
.pipe(
scan((acc, paginatedResult) => paginatedResult ? acc.concat(paginatedResult) : acc,
[] as Pokemon[]),
);
pokemonStreamResource = rxResource({
stream: () => this.pokemonsPagination$
})
}
The pokemonPagination is a computed signal that either gives the stream data (Pokemon) or undefined.
ThepokemonsPagination$ is an Observable that appends the new Pokemon to the Pokemon list. Moreover, the stream property of rxResource expects a function that returns an Observable.
The pokemonStreamResource streams the pokemonsPagination$ Observable and displays the new data in the HTML template.
@if (pokemonList()) {
@for (result of pokemonList(); track result.name) {
<app-pokemon-row [result]="result" />
<hr />
} @empty {
<p>No Pokemon</p>
}
}
This is how we can use rxResource and the Signal API to stream Pokemons in Angular 20.
Demos
Resources
- The PR relevant to the Resource API: PR60919
- Resource Doc: https://next.angular.dev/guide/signals/resource#
- resource API: https://next.angular.dev/api/core/resource#
- rxResource API: https://next.angular.dev/api/core/rxjs-interop/rxResource#