injectQueryParams

injectQueryParams is a helper function that allows us to inject query params from the current route as a signal.

Having query params as a signal helps in a modern angular signals based architecture.

Import

import { injectQueryParams } from 'ngxtension/inject-query-params';

Usage

Get all query params

injectQueryParams when it’s called, returns a signal with the current query params.

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: '<div>{{queryParams() | json}}</div>',
})
class TestComponent {
  queryParams = injectQueryParams();
}

Or, if we want to transform the query params, we can pass a function to injectQueryParams.

import { injectQueryParams } from 'ngxtension/inject-query-params';

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

  allQueryParamsArePassed = computed(() => {
    const keys = this.queryParamsKeys();
    return ['search', 'sort', 'page'].every((x) => keys.includes(x));
  });
}

Get a single value

If we want to get the value for a specific query param, we can pass the name of the query param to injectQueryParams.

// Example url: /users?search=nartc

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: `
    Search results for: {{ searchParam() }}

    @for (user of filteredUsers()) {
      <div>{{ user.name }}</div>
    } @empty {
      <div>No users!</div>
    }
  `,
})
class TestComponent {
  searchParam = injectQueryParams('search'); // returns a signal with the value of the search query param

  filteredUsers = derivedAsync(
    () => this.userService.getUsers(this.searchParam() ?? ''),
    { initialValue: [] },
  );
}

If we want to additional transform the value into any shape, we can pass a transform function.

// Example url: /users?pageNumber=1

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: `
    Page number: {{ pageNumber() }} Multiplied number: {{ multipliedNumber() }}
  `,
})
class TestComponent {
  pageNumber = injectQueryParams('pageNumber', { transform: numberAttribute });

  multipliedNumber = computed(() => this.pageNumber() * 2);
}

If we want to use a default value if there is no value, we can pass a initialValue.

// Example urls producing the same output: "/users?search=nartc", "/users"

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: `
    Search results for: {{ searchParam() }}

    @for (user of filteredUsers()) {
      <div>{{ user.name }}</div>
    } @empty {
      <div>No users!</div>
    }
  `,
})
class TestComponent {
  // returns a signal with the value of the search query param or '' if not provided.
  searchParam = injectQueryParams('search', { initialValue: 'nartc' });

  filteredUsers = derivedAsync(
    () => this.userService.getUsers(this.searchParam()),
    { initialValue: [] },
  );
}

Get an array value

If we want to get the values for a specific query param, we can pass the name of the query param, to injectQueryParams.array.

// Example url: /search?products=Angular&products=Analog

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: `
    Selected products: {{ productNames() }}

    @for (product of products(); track product.id) {
      <div>{{ product.name }}</div>
    } @empty {
      <div>No products!</div>
    }
  `,
})
class TestComponent {
  productService = inject(ProductService);
  // returns a signal with the array values of the product query param
  productNames = injectQueryParams.array('products');

  products = derivedAsync(
    () => this.productService.getByNames(this.productNames()),
    { initialValue: [] },
  );
}

If we want to additional transform the values into any shape, we can pass a transform function.

// Example url: /search?productIds=Angular&productIds=Analog

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: `
    Selected products: {{ productIds() }}

    @for (product of products(); track product.id) {
      <div>{{ product.name }}</div>
    } @empty {
      <div>No products!</div>
    }
  `,
})
class TestComponent {
  productService = inject(ProductService);
  // returns a signal with the array values of the product query param and transform each value
  productIds = injectQueryParams.array('productIds', {
    transform: numberAttribute,
  });

  products = derivedAsync(
    () => this.productService.getByIds(this.productIds()),
    { initialValue: [] },
  );
}

If we want to use a default value if there are no values, we can pass a initialValue.

// Example urls producing the same output: "/search?products=Angular", "/search"

import { injectQueryParams } from 'ngxtension/inject-query-params';

@Component({
  template: `
    Selected products: {{ productNames() }}

    @for (product of products(); track product.id) {
      <div>{{ product.name }}</div>
    } @empty {
      <div>No products!</div>
    }
  `,
})
class TestComponent {
  productService = inject(ProductService);
  // returns a signal with the array values of the product query param or 'Angular' if the user provides none
  productNames = injectQueryParams.array('products', {
    initialValue: ['Angular'],
  });

  products = derivedAsync(
    () => this.productService.getByNames(this.productNames()),
    { initialValue: [] },
  );
}