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.

Usage

  • When injectQueryParams is called, it returns a signal containing the current query parameters.
  • To further transform the value into any shape, you can pass a transform function.
  • To use a default value when no value is present, you can pass an initialValue.
  • To transform the query parameters, you can pass a function to injectQueryParams.
  • To get the value of a specific query parameter, you can pass the name of the parameter to injectQueryParams.
import {injectParams} from 'ngx-lift';

export class InjectParamsComponent {
  allQueryParams = injectQueryParams();

  // returns a signal with all keys of the query params
  queryParamsKeys = injectQueryParams((params) => Object.keys(params));

  // returns a signal with "search" querystring, convert the search value to number, initial value is 3
  searchParam = injectQueryParams('search', {initialValue: 3, transform: numberAttribute});

  // whenever searchParam is changed, fetch users
  users = computedAsync(() => this.userService.getUsers({results: this.searchParam()}));

  // returns a signal with "page" querystring, convert the page value to number
  pageNumber = injectQueryParams('page', {transform: numberAttribute});

  // you can use computed with the signal returned from injectQueryParams
  multipliedNumber = computed(() => (this.pageNumber() || 0) * 2);
}