withEntitiesSyncToRouteQueryParams

Syncs entities filter, pagination, sort, single selection and multi selection to route query params for local or remote entities store features. If a collection is provided, it will be used as a prefix (if non is provided) for the query params. The prefix can be disabled by setting it to false, or changed by providing a string. The filterMapper can be used to customize how the filter object is map to a query params object, when is not provided the filter will use JSON.stringify to serialize the filter object.

Requires withEntities and withCallStatus to be present in the store.

Import

Import the withEntitiesSyncToRouteQueryParams trait from @ngrx-traits/signals.

import { withEntitiesSyncToRouteQueryParams } from '@ngrx-traits/signals';

Examples

Syncing entities filter, pagination, sort and single selection to route query params

export const ProductsRemoteStore = signalStore(
  { providedIn: 'root' },
  // requires at least withEntities and withCallStatus
  withEntities({ entity, collection }),
  withCallStatus({ prop: collection, initialValue: 'loading' }),
  withEntitiesRemoteFilter({
    entity,
    collection,
  }),
  withEntitiesRemotePagination({
    entity,
    collection,
  }),
  withEntitiesRemoteSort({
    entity,
    collection,
    defaultSort: { field: 'name', direction: 'asc' },
  }),
  withEntitiesLoadingCall({
    collection,
    fetchEntities: ({ productEntitiesFilter, productEntitiesPagedRequest, productEntitiesSort }) => {
      return inject(ProductService)
        .getProducts({
          search: productEntitiesFilter().name,
          take: productEntitiesPagedRequest().size,
          skip: productEntitiesPagedRequest().startIndex,
          sortColumn: productEntitiesSort().field,
          sortAscending: productEntitiesSort().direction === 'asc',
        })
        .pipe(
          map((d) => ({
            entities: d.resultList,
            total: d.total,
          })),
        );
    },
  }),
  // syncs the entities filter, pagination, sort and single selection to the route query params
  withEntitiesSyncToRouteQueryParams({
    entity,
    collection,
  })
);

Syncing with multi selection

Use syncMultiSelection: true when using withEntitiesMultiSelection. Selected ids are serialized as a comma-separated selectedIds query param.

export const ProductsLocalStore = signalStore(
  { providedIn: 'root' },
  withEntities({ entity, collection }),
  withCallStatus({ prop: collection, initialValue: 'loading' }),
  withEntitiesMultiSelection({ entity, collection }),
  withEntitiesLoadingCall({ ... }),
  withEntitiesSyncToRouteQueryParams({
    entity,
    collection,
    syncMultiSelection: true,
  }),
);

API Reference

Property	Description	Value
entity	The entity type	type()
collection	The name of the collection. Optional	string
prefix	Prefix for the url query params to avoid conflicts with query param	string. Default to the collection value
filterMapper	Configure how the entities filter is serialize to and from the query params	FilterQueryMapper
onQueryParamsLoaded	Callback to execute something else when the query params are loaded from the store	(store) => void
defaultDebounce	Debounce time for syncing store changes back to the route query params	number (milliseconds)
skipLoadingCall	When true, restoring state from query params will update the store state but will not trigger a backend call to fetch entities. Default: false	boolean
syncFilter	Sync entities filter to route query params. Default: true	boolean
syncPagination	Sync entities pagination to route query params. Default: true	boolean
syncSort	Sync entities sort to route query params. Default: true	boolean
syncSingleSelection	Sync single selected entity id to route query params as selectedId. Default: true	boolean
syncMultiSelection	Sync multi selected entity ids to route query params as selectedIds (comma-separated). Default: false	boolean

State

Generates no extra state

Computed

Generates no extra computed signals

Methods

Generates no extra computed methods