API Reference

---

API Reference / @dasch-ng/route-signals / routeParam

Function: routeParam()

Call Signature

routeParam(key): Signal<string>

Defined in: route-param.ts:54

Creates a signal that tracks a URL-encoded route parameter and automatically decodes it.

This utility function extracts a route parameter from the current ActivatedRoute, automatically decodes URL-encoded values (e.g., spaces encoded as %20), and returns a signal that updates when the route parameter changes. If the parameter is not present and no fallback is provided, an error is thrown.

Parameters

key

string

The name of the route parameter to track

Returns

Signal<string>

A signal containing the decoded route parameter value

Throws

Error if the route parameter is not present and no fallback is provided

Example

// In a component
export class MyComponent {
  // Route: /domains/:domainId/groups/:groupId
  private readonly domainId = routeParam('domainId');
  private readonly groupId = routeParam('groupId');

  constructor() {
    // If URL is /domains/my-domain/groups/a%20b
    console.log(this.domainId()); // "my-domain"
    console.log(this.groupId());  // "a b" (decoded from "a%20b")
  }
}

// With fallback value for optional parameters
export class FilterComponent {
  // Route: /list/:category
  private readonly category = routeParam('category', 'all');

  constructor() {
    // If URL is /list/electronics
    console.log(this.category()); // "electronics"

    // If navigated to a route without :category, signal returns fallback
    console.log(this.category()); // "all"
  }
}

Call Signature

routeParam(key, fallback): Signal<string>

Defined in: route-param.ts:55

Creates a signal that tracks a URL-encoded route parameter and automatically decodes it.

This utility function extracts a route parameter from the current ActivatedRoute, automatically decodes URL-encoded values (e.g., spaces encoded as %20), and returns a signal that updates when the route parameter changes. If the parameter is not present and no fallback is provided, an error is thrown.

Parameters

key

string

The name of the route parameter to track

fallback

string

Optional fallback value to use when the parameter is not present. If provided, the signal will return this value when the parameter is missing from the route. If not provided, an error is thrown when the parameter is not present.

Returns

Signal<string>

A signal containing the decoded route parameter value

Throws

Error if the route parameter is not present and no fallback is provided

Example

// In a component
export class MyComponent {
  // Route: /domains/:domainId/groups/:groupId
  private readonly domainId = routeParam('domainId');
  private readonly groupId = routeParam('groupId');

  constructor() {
    // If URL is /domains/my-domain/groups/a%20b
    console.log(this.domainId()); // "my-domain"
    console.log(this.groupId());  // "a b" (decoded from "a%20b")
  }
}

// With fallback value for optional parameters
export class FilterComponent {
  // Route: /list/:category
  private readonly category = routeParam('category', 'all');

  constructor() {
    // If URL is /list/electronics
    console.log(this.category()); // "electronics"

    // If navigated to a route without :category, signal returns fallback
    console.log(this.category()); // "all"
  }
}