injectQueryParams

The injectQueryParams function is a helper that enables us to inject query parameters from the current route as a signal. Utilizing query parameters as a signal is beneficial in a modern Angular signals-based architecture. It supports getting all query parameters, a specific parameter, transforming parameters, and providing initial values.

Examples

Example 1: Get All Query Parameters

Get all query parameters as a signal:

import {injectQueryParams} from 'ngx-lift';

export class MyComponent {
  // Returns a signal with all query parameters
  allQueryParams = injectQueryParams();
}

Example 2: Get Single Query Parameter

Get a specific query parameter by name:

import {injectQueryParams} from 'ngx-lift';
import {Signal} from '@angular/core';

export class MyComponent {
  // Returns a signal with the value of the "page" query parameter
  page: Signal<string | null> = injectQueryParams('page');
}

Example 3: Transform Query Parameters

Transform query parameters using a transform function:

import {injectQueryParams} from 'ngx-lift';

export class MyComponent {
  // Returns a signal with all keys of the query params
  queryParamsKeys = injectQueryParams((params) => Object.keys(params));
}

Example 4: Transform with Initial Value

Transform query parameters with an initial value and type conversion:

import {injectQueryParams} from 'ngx-lift';
import {numberAttribute, Signal} from '@angular/core';

export class MyComponent {
  // Returns a signal with "search" querystring, convert to number, initial value is 3
  searchParam: Signal<number> = injectQueryParams('search', {
    initialValue: 3,
    transform: numberAttribute,
  });
}

Example 5: Complete Usage Example

Complete example showing various usage patterns:

import {injectQueryParams, computedAsync} from 'ngx-lift';
import {computed} from '@angular/core';
import {numberAttribute, Signal} from '@angular/core';

export class SearchComponent {
  private userService = inject(UserService);

  // Get all query params
  allQueryParams = injectQueryParams();

  // Transform with initial value
  searchParam: Signal<number> = injectQueryParams('search', {
    initialValue: 3,
    transform: numberAttribute,
  });

  // Get single param with transform
  pageNumber: Signal<number | null> = injectQueryParams('page', {
    transform: numberAttribute,
  });

  // Use with computedAsync to fetch data when param changes
  users = computedAsync(() => this.userService.getUsers({results: this.searchParam()}));

  // Use with computed
  multipliedNumber = computed(() => (this.pageNumber() || 0) * 2);
}

API Reference

injectQueryParams

Injects and transforms route query parameters as reactive signals.

Signature

injectQueryParams(): Signal<Params>
injectQueryParams(key: string): Signal<string | null>
injectQueryParams<T>(key: string, options: InjectQueryParamsOptions<T>): Signal<T>
injectQueryParams<T>(transform: (params: Params) => T): Signal<T>
injectQueryParams<T>(transform: (params: Params) => T, options: InjectQueryParamsOptions<T>): Signal<T>

Parameters

keyOrTransform?: string | ((params: Params) => T)
(Optional) When a string is provided, returns the value of that query parameter. When a function is provided, it's used as a transform function to process all query parameters.
If omitted, returns a signal containing all query parameters of the current route.
options?: InjectQueryParamsOptions<T>
(Optional) Configuration object containing transform function and/or initialValue.
If initialValue is a boolean or number, transform function must be provided to convert the string parameter to the correct type.

Returns

A signal containing the query parameter value(s) or transformed result.