Generates necessary state, computed and methods for sorting locally entities in the store.

Requires withEntities to be present in the store.

Kind: global function

Import

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

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

Examples

Implement remote sort for a list of entities

const entity = entityConfig({
    entity: type<T>(),
    collection: 'users'
})

const store = signalStore(
    withEntities(entity),
    withEntitiesLocalSort({
        ...entity,
        defaultSort: {field: 'name', 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):

<users-sort-dropdown
  [sort]="store.usersSort()"
  (sortChange)="store.sortUsersEntities({ sort: $event })"
/>
... show products list

Mixing with other local store features

You can mix this feature with other local store features like withEntitiesLocalFilter, withEntitiesLocalPagination, etc.

const productsEntityConfig = entityConfig({
  entity: type<Product>(),
  collection: 'products',
});
export const ProductsLocalStore = signalStore(
  { providedIn: 'root' },
  withEntities(productsEntityConfig),
  withCallStatus({ ...productsEntityConfig, initialValue: 'loading' }),
  withEntitiesLocalPagination({
    ...productsEntityConfig,
    pageSize: 5,
  }),
  withEntitiesLocalFilter({
    ...productsEntityConfig,
    defaultFilter: { search: '' },
    filterFn: (entity, filter) =>
      !filter?.search ||
      entity?.name.toLowerCase().includes(filter?.search.toLowerCase()),
  }),
  withEntitiesLocalSort({
    ...productsEntityConfig,
    defaultSort: { field: 'name', direction: 'asc' },
  }),
  withEntitiesLoadingCall({
    ...productsEntityConfig,
    fetchEntities: () => {
      return inject(ProductService)
        .getProducts()
        .pipe(map((d) => d.resultList));
    },
  }),
);

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

API Reference

This trait receives an object or factory to allow specific configurations:

Property	Description	Value
entity	The entity type	type<T>()
collection	The name of the collection. Optional	string
defaultSort	The initial sort config.	{ field: string; direction: 'asc' | 'desc' | '' }

State

Generates the following signals

entitiesSort: Signal<{ field: string; pageSize: direction: 'asc' | 'desc' | '' }>;

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

usersSort: Signal<{ field: string; pageSize: direction: 'asc' | 'desc' | '' }>;

Methods

Generates the following methods

sortEntities: ({sort: { field: string; pageSize: direction: 'asc' | 'desc' | ''}}) => void;

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

sortUsers: ({sort: { field: string; pageSize: direction: 'asc' | 'desc' | ''}}) => void;