API Reference

---

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

Function: routeQueryParam()

Call Signature

routeQueryParam(key): Signal<string>

Defined in: route-query-param.ts:56

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

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

Parameters

key

string

The name of the query parameter to track

Returns

Signal<string>

A signal containing the decoded query parameter value

Throws

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

Example

// In a component
export class SearchComponent {
  // URL: /search?q=hello%20world&filter=active
  private readonly searchQuery = routeQueryParam('q');
  private readonly filter = routeQueryParam('filter');

  constructor() {
    console.log(this.searchQuery()); // "hello world" (decoded from "hello%20world")
    console.log(this.filter());      // "active"
  }
}

// With fallback value for optional parameters
export class ProductListComponent {
  // URL: /products?sort=price&order=asc
  private readonly sort = routeQueryParam('sort', 'name');
  private readonly order = routeQueryParam('order', 'asc');

  constructor() {
    // If URL is /products?sort=price
    console.log(this.sort());  // "price"
    console.log(this.order()); // "asc" (fallback value)

    // If navigated to /products (no query params), signals return fallback values
    console.log(this.sort());  // "name"
    console.log(this.order()); // "asc"
  }
}

Call Signature

routeQueryParam(key, fallback): Signal<string>

Defined in: route-query-param.ts:57

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

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

Parameters

key

string

The name of the query 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 query parameter value

Throws

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

Example

// In a component
export class SearchComponent {
  // URL: /search?q=hello%20world&filter=active
  private readonly searchQuery = routeQueryParam('q');
  private readonly filter = routeQueryParam('filter');

  constructor() {
    console.log(this.searchQuery()); // "hello world" (decoded from "hello%20world")
    console.log(this.filter());      // "active"
  }
}

// With fallback value for optional parameters
export class ProductListComponent {
  // URL: /products?sort=price&order=asc
  private readonly sort = routeQueryParam('sort', 'name');
  private readonly order = routeQueryParam('order', 'asc');

  constructor() {
    // If URL is /products?sort=price
    console.log(this.sort());  // "price"
    console.log(this.order()); // "asc" (fallback value)

    // If navigated to /products (no query params), signals return fallback values
    console.log(this.sort());  // "name"
    console.log(this.order()); // "asc"
  }
}