withEntitiesRemoteSort

Generates state, signals, and methods to sort entities remotely. When the sort method sort[collection]Entities is called it will store the sort and call set[Collection]Loading, and you should either create an effect that listens to [collection]Loading and call the api with the [collection]Sort params and use wither setAllEntities if is not paginated or set[Collection]Result if is paginated with the sorted result that come from the backend, plus changing the status and set errors is needed. or use withEntitiesLoadingCall to call the api with the [collection]Sort params which handles setting the result and errors automatically.

In case you dont want sort[collection]Entities to call set[collection]Loading() (which triggers a fetchEntities), you can pass skipLoadingCall: true to sort[collection]Entities. Useful in cases where you want to further change the state before manually calling set[collection]Loading() to trigger a fetch of entities.

Requires withEntities and withCallStatus to be present before this function.

Examples

Implement remote sort for a list of entities

const entityConfig = entityConfig({
  entity: type<T>(),
  collection:"products",
});

export const store = signalStore(
  withEntities(entityConfig),
  withCallStatus({ ...entityConfig, initialValue: 'loading' }),

  withEntitiesRemoteSort({
    ...entityConfig,
    defaultSort: { field: 'name', direction: 'asc' },
  }),
  withEntitiesLoadingCall({
    ...entityConfig,
    fetchEntities: ({ productsSort }) => {
      return inject(ProductService).getProducts({
        sortColumn: productsSort().field,
        sortAscending: productsSort().direction === 'asc',
      });
    },
  }),
);

To use you generally need either a sort dropdown if is a list or a table where clicking on the columns headers sorts, bellow is how s used with a dropdown (you can find full source code in the examples folder in github):

<product-sort-dropdown
  [sort]="store.productsSort()"
  (sortChange)="store.sortProductsEntities({ sort: $event })"
/>
... show products list

Mixing with other remote store features

You can mix this feature with other remote store features like withEntitiesRemoteFilter, withEntitiesRemoteFilter, etc.

const productsStoreFeature = signalStoreFeature(
  withEntities({
    entity: productsEntity,
    collection: productsCollection,
  }),
  withCallStatus({
    initialValue: 'loading',
    collection: productsCollection,
    errorType: type<string>(),
  }),
  withEntitiesRemoteFilter({
    entity: productsEntity,
    collection: productsCollection,
    defaultFilter: { search: '' },
  }),
  withEntitiesRemotePagination({
    entity: productsEntity,
    collection: productsCollection,
    pageSize: 10,
  }),
  withEntitiesRemoteSort({
    entity: productsEntity,
    collection: productsCollection,
    defaultSort: { field: 'name', direction: 'asc' },
  }),
  withEntitiesLoadingCall(
    ({ productsPagedRequest, productsFilter, productsSort }) => ({
      collection: productsCollection,
      fetchEntities: async () => {
        const res = await lastValueFrom(
          inject(ProductService).getProducts({
            search: productsFilter().search,
            skip: productsPagedRequest().startIndex,
            take: productsPagedRequest().size,
            sortAscending: productsSort().direction === 'asc',
            sortColumn: productsSort().field,
          }),
        );
        return { entities: res.resultList, total: res.total };
      },
    }),
  ),
);

To know more how it mixes and works with other local store features, check Working with Entities section.

API Reference

Property	Description	Value
entity	The entity type	type<T>()
collection	The name of the collection. Optional	string
defaultSort	The default sort column	Sort<Entity>

State

Generates the following signals

entitiesSort: Sort<Entity>;

If collection provided, the following signals are generated, example: users

usersSort: Sort<Entity>;

Computed

No computed properties are generated by this function.

Methods

Generates the following methods

sortEntities: (options?: { sort: Sort<Entity>;  skipLoadingCall?:boolean}) => void;

If collection provided, the following methods are generated, example: users

sortProductsEntities: (options: { sort: Sort<Entity>;  skipLoadingCall?:boolean}) => void;