linkedSignal() demo

Live code from the Angular linkedSignal() guide. Full deep-dive in Mastering Angular Signals.

linkedSignal() gives you derived state you can still write to. Type in the search box and watch the page snap back to 0, then click next and watch the same signal accept a direct write.

1. Paginated search

resultsPage is a linkedSignal() over { term, limit }. A new term resets it to 0. A new page size uses previous to keep you near the same item. Next and previous write to it directly.

Search people

Page size

Current page

last page is 4

First item index

24 matches

Resets so far

page snapped to 0

direct set() / update() on the same signal

2. The code you are watching

Two sources in one object, so computation can tell which one changed and can read previous.source.

searchTerm = signal('');
resultsLimit = signal(5);

resultsPage = linkedSignal<{ term: string; limit: number }, number>({
  source: () => ({ term: this.searchTerm(), limit: this.resultsLimit() }),
  computation: (source, previous) => {
    // A new search term means a genuinely new result set: start at page 0.
    if (!previous || previous.source.term !== source.term) {
      return 0;
    }

    // Only the page size changed: keep the user near the same item.
    const firstVisibleItem = previous.value * previous.source.limit;
    return Math.floor(firstVisibleItem / source.limit);
  },
});

nextPage() {
  this.resultsPage.update((page) => page + 1);
}

3. Selection that survives a reload

The ProductPicker pattern. selectedId keeps your pick when the reloaded list still contains it, and falls back to the first item when it does not.

Selected id: p1 (original list)

4. What happened, in order

An effect() used the way the post recommends: only to observe and log, never to keep two signals in sync.

ready: page 0, size 5, no search term