Cookbooks / httpResource

httpResource tables and search

This page uses Angular httpResource() keyed off query, page, and sort signals. The docs site answers those requests with a fixture interceptor so prerender has no backend. Point the same URL factory at your API. The same signals drive data-table, combobox, and virtual-scroll.

  1. Keep query and page as signals. Store the search box, page index, and sort in signals. httpResource re-runs when those signals change.
  2. Debounce the query. Delay writing the search signal so each keystroke does not hit the network. A short timeout is enough — you do not need a full RxJS stack.
  3. Bind the table in serverSide mode. Pass httpResource.value() into data and totalItems, isLoading() into loading, and write page/sort from pageChange and sortChange.
  4. Reuse the same resource for combobox and virtual-scroll. Combobox uses filterMode none plus queryChange. Virtual-scroll binds items to httpResource.value(). Point the URL factory at your API.

Your API

The demos below already call httpResource. In your app, change the URL (JSON) or switch to rxResource if the source is already an Observable. 

readonly query = signal('');
readonly users = httpResource(() => ({
  url: '/api/users',
  params: { q: this.query() },
}));
readonly users = rxResource({
  params: () => this.query(),
  stream: ({ params }) => this.http.get<User[]>('/api/users', { params: { q: params } }),
});

Server-paged table

Type to debounce the query, then page and sort. serverSide keeps slicing in httpResource, not in the table.

ID
Name
Email
Role
1 User 1 user1@example.com Admin
2 User 2 user2@example.com Editor
3 User 3 user3@example.com Viewer
4 User 4 user4@example.com Admin
5 User 5 user5@example.com Editor
6 User 6 user6@example.com Viewer
7 User 7 user7@example.com Admin
8 User 8 user8@example.com Editor
1–8 of 64

Combobox (async)

filterMode="none" plus queryChange — options come from the resource.

Virtual scroll

Bind [items] to list.value(). Only visible rows stay in the DOM.