withEntitiesLocalPagination

Generates necessary state, computed and methods for local pagination of entities in the store.

Requires withEntities to be present in the store.

Kind: global function

Import

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

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

Examples

Paginating a list of entities

In this example we have a list of users and we want to paginate them, we will use the pageSize prop to set the initial page size.

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

const store = signalStore(
    withEntities(userEntityConfig),
    withEntitiesLocalPagination(userEntityConfig, {
        pageSize: 10,
    })
);

Now we use it in a component, the generated userEntitiesCurrentPage signal will provide the entities for the current page, the pageIndex and the total number of entities:

@for (user of store.userEntitiesCurrentPage.entities(); track user.id){
  {{ user.name }}
}
<mat-paginator
  [pageSizeOptions]="[5, 10, 25, 100]"
  [length]="store.userEntitiesCurrentPage.total()"
  [pageSize]="store.userEntitiesCurrentPage.pageSize()"
  [pageIndex]="store.userEntitiesCurrentPage.pageIndex()"
  (page)="store.loadUserEntitiesPage($event)"
></mat-paginator>

Mixing with other local store features

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

const productsEntityConfig = entityConfig({
  entity: type<Product>(),
  collection: 'product',
});
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()
collection	The name of the collection. Optional	string
pageSize	The initial page size.	number
currentPage	The initial page index.	number

State

Generates the following signals

entitiesPagination: Signal<{ currentPage: number; pageSize: number }>;

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

userEntitiesPagination: Signal<{ currentPage: number; pageSize: number }>;

Computed

Generates the following computed signals, they are DeepSignals, so each prop can be read as a signal of its own, e.g. entitiesCurrentPage.total()

entitiesCurrentPage: DeepSignal<{
  entities: T[];
  pageIndex: number;
  total: number | undefined;
  pageSize: number;
  pagesCount: number | undefined;
  hasPrevious: boolean;
  hasNext: boolean;
}>;

If collection provided, the following computed signals are generated, example: user

userEntitiesCurrentPage: DeepSignal<{
  entities: T[];
  pageIndex: number;
  total: number | undefined;
  pageSize: number;
  pagesCount: number | undefined;
  hasPrevious: boolean;
  hasNext: boolean;
}>;

Methods

Generates the following methods

loadEntitiesPage: (options: { pageIndex: number; pageSize?: number }) => void;

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

loadUserEntitiesPage: (options: { pageIndex: number; pageSize?: number }) => void;