withRoute

This store feature provides access to route params, query params, and route data. The mapParams function receives an object with params, queryParams, and data, use it to transform them into store computed signals.

Examples

Basic route params

// route: /products/:id/
const ProductDetailStore = signalStore(
  withRoute(({ params }) => ({ id: params['id'] as string })),
  withCalls(() => ({
    loadProductDetail: (id: string) =>
      inject(ProductService).getProductDetail(id),
  })),
  withHooks(({ loadProductDetail, id }) => ({
    onInit: () => {
      loadProductDetail(id());
    },
  })),
);

Using query params

// route: /products?search=test&page=1
const ProductListStore = signalStore(
  withRoute(({ queryParams }) => ({
    search: queryParams['search'] as string ?? '',
    page: +(queryParams['page'] as string ?? 1),
  })),
);

// Access in component
store.search(); // 'test'
store.page();   // 1

Combining params and queryParams

// route: /categories/:categoryId/products?sort=name&order=asc
const ProductListStore = signalStore(
  withRoute(({ params, queryParams }) => ({
    categoryId: params['categoryId'] as string ,
    sort: queryParams['sort'] as string ?? 'name',
    order: queryParams['order'] as string ?? 'asc',
  })),
);

Using route data

// Route config: { path: 'admin', data: { role: 'admin' } }
const AdminStore = signalStore(
  withRoute(({ data }) => ({
    role: data?.['role'] as string,
  })),
);

Child routes params

withRoute automatically extracts params from all child routes. Deeper child params take precedence over parent params with the same name.

// routes config:
// { path: ':orgId', children: [{ path: ':projectId', component: ProjectComponent }] }
// url: /org-123/project-456

const ProjectStore = signalStore(
  withRoute(({ params }) => ({
    orgId: params['orgId'] as string ,         // 'org-123'
    projectId: params['projectId'] as string , // 'project-456'
  })),
);

API

Property	Description	Value
mapParams	Function to transform params into store computed signals	(options: { params: Params, queryParams: Params, data?: any }) => T

State

No state signals are generated.

Computed

Generates computed signals for each property returned by the mapParams function.

// for withRoute(({ params, queryParams }) => ({
//   id: params['id'] as string ,
//   page: +queryParams['page']
// }))
{
  id: Signal<string>;
  page: Signal<number>;
}

Methods

No methods are generated by this function.