Append Data to a signal | Angular Community | Page 1

hallow epoch Aug 28, 2025, 8:43 PM

#

I am using httpResource to fetch data based on changing signals

export class SpotifyUserTopService {
  type = signal<"artists" | "tracks">("tracks");
  timeRange = signal<"long_term" | "medium_term" | "short_term">('long_term');
  readonly limit = signal<number>(50); //hard limit of 50 by 
  offset = signal<number>(0);

  topArtists = httpResource<SpotifyTopArtistsResponse>(() =>
    this.type() === 'artists'
      ? `${API_ENDPOINTS.USERS.TOP}artists?time_range=${this.timeRange()}&limit=${this.limit()}&offset=${this.offset()}`
      : undefined
  );

  topTracks = httpResource<SpotifyTopTracksResponse>(() =>
    this.type() === 'tracks'
      ? `${API_ENDPOINTS.USERS.TOP}tracks?time_range=${this.timeRange()}&limit=${this.limit()}&offset=${this.offset()}`
      : undefined
  );
}

    @for (item of topArtists.value().items; track $index) {
    <app-stat-card [index]="$index + 1"
      [image]="(view() === 'list' ? item.images[2]?.url : item.images[1]?.url) ?? 'https://placehold.co/600x400/222326/FFFFFF?text=No+Image'"
      [title]="item.name" [redirectUrl]="item.external_urls.spotify" [view]="view()"></app-stat-card>
    }

but when we reach the end of the 50 results i want to chaneg the value of offset signal to 50 and then show the new list with new 50 values appended to it. How can i achive this without using effect with allowWriteableSignals

lyric flint Aug 28, 2025, 8:51 PM

#

You could use a linkedSignal, which has the latest loaded batch of 50 results as its source, and which computes its value by appending these latest 50 results to the previous ones (since a linkedSignal computation has access to its previous state): https://angular.dev/guide/signals/linked-signal#accounting-for-previous-state

hallow epoch Aug 28, 2025, 9:04 PM

#

im having a hard time trying to use linkedSignal to compute and append the data mostly because of typescript i believe. could u please show an example

#Append Data to a signal