Cookbooks / httpResource

httpResource tables and search

This page uses Angular resource() against in-memory data so the docs site prerenders without a backend. In your app, swap the in-memory loader for Angular httpResource keyed off a query signal. 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 (or resource) 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 resource.value() into data and totalItems, resource.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 the resource value. Swap the in-memory loader for httpResource in production.

Production snippet

Replace the in-memory resource() loader with httpResource (JSON) or rxResource if the source is already an Observable. 

readonly query = signal('');
readonly users = httpResource(() => `/api/users?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 on the resource, not in the table.

ID
Name
Email
Role
1 User 1 [email protected] Admin
2 User 2 [email protected] Editor
3 User 3 [email protected] Viewer
4 User 4 [email protected] Admin
5 User 5 [email protected] Editor
6 User 6 [email protected] Viewer
7 User 7 [email protected] Admin
8 User 8 [email protected] Editor
1–8 of 64

Combobox (async)

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

Virtual scroll

Bind [items] to the filtered list. Only visible rows stay in the DOM.