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);
}