useRouteParams

A convenience function that wraps Angular's ActivatedRoute.params, exposing all route parameters as a signal-based object. This is useful when you need to access multiple route parameters at once or work with the entire parameter object reactively.

Usage

import { useRouteParams } from 'ng-reactive-utils';

// Route: /users/:userId/posts/:postId
@Component({
  template: `<h1>User {{ params().userId }} - Post {{ params().postId }}</h1>`,
})
class PostDetailComponent {
  params = useRouteParams<{ userId: string; postId: string }>();

  postResource = resource({
    params: () => this.params(),
    loader: ({ params }) => fetchPost(params.userId, params.postId),
  });
}

Returns

Signal<T> - A readonly signal containing all route parameters as an object

Notes

• Uses toSignal with route.params observable
• Type parameter T defaults to { [key: string]: string | null }
• Updates reactively when any route parameter changes
• For single parameter access, consider using useRouteParam instead

Source

import { Signal, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';

export const useRouteParams = <T extends { [key: string]: string | null }>() => {
  const route = inject(ActivatedRoute);

  return toSignal(route.params, {
    initialValue: route.snapshot.params,
  }) as Signal<T>;
};