Params
Reactive wrapper around Angular Router's route parameters. Access route params as signals with full type-safety.
Usage
angular-ts
import { Component } from '@angular/core';
import { params } from '@signality/core';
@Component({
template: `
<h1>User: {{ routeParams().id }}</h1>
<p>Slug: {{ routeParams().slug }}</p>
`,
})
export class UserPage {
readonly routeParams = params<{ id: string; slug: string }>();
}Parameters
| Parameter | Type | Description |
|---|---|---|
options | ParamsOptions<T> | Optional configuration (see Options below) |
Options
The ParamsOptions extends CreateSignalOptions<T> and WithInjector:
| Option | Type | Default | Description |
|---|---|---|---|
equal | ValueEqualityFn<T> | - | Custom equality function (see more) |
debugName | string | - | Debug name for the signal (development only) |
injector | Injector | - | Optional injector for DI context |
Return Value
Returns a Signal<T> containing the current route parameters, where T is an object with string keys and values of any type (defaults to Record<string, any>).
Examples
Type-safe params
angular-ts
import { Component } from '@angular/core';
import { params } from '@signality/core';
interface ProductParams {
categoryId: string;
productId: string;
}
@Component({
template: `
<p>Category: {{ routeParams().categoryId }}</p>
<p>Product: {{ routeParams().productId }}</p>
`,
})
export class ProductPage {
readonly routeParams = params<ProductParams>();
}Accessing individual params
angular-ts
import { Component, computed } from '@angular/core';
import { params } from '@signality/core';
@Component({
template: `
<p>User ID: {{ userId() }}</p>
<p>Action: {{ action() ?? 'view' }}</p>
`,
})
export class UserDetail {
readonly routeParams = params<{ id: string; action?: string }>();
readonly userId = computed(() => this.routeParams().id);
readonly action = computed(() => this.routeParams().action);
}SSR Compatibility
On the server, the signal initializes with the route params from the snapshot.
Type Definitions
typescript
type ParamsOptions<T extends Record<string, any> = Record<string, any>> = CreateSignalOptions<T> & WithInjector;
function params<T extends Record<string, any> = Record<string, any>>(options?: ParamsOptions<T>): Signal<T>;Related
- queryParams — Access query parameters
- fragment — Access URL fragment
- url — Access current URL