Request for injectParentParams()

[RyannGalea]

There is usually many instances where I'll be fetching an id from the parent route but from the child route / component. I used the original source to build this but thought it would be pretty easy to implement into the code.

Maybe even an option in the original injectParams() to search up the tree instead of just the immediate route.

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

/**
 * Injects the params from the current routes parent.
 */
export function injectParentParams(): Signal<Params>;

/**
 * Injects the params from the current routes parent and returns the value of the provided key.
 * @param key
 */
export function injectParentParams(key: string): Signal<string | null>;

/**
 * Injects the params from the current routes parent and returns the result of the provided transform function.
 * @param transform
 */
export function injectParentParams<T>(transform: (params: Params) => T): Signal<T>;

/**
 * Injects the params from the current routes parent.
 * If a key is provided, it will return the value of that key.
 * If a transform function is provided, it will return the result of that function.
 * Otherwise, it will return the entire params object.
 *
 * @example
 * const userId = injectParentParams('id'); // returns the value of the 'id' param
 * const userId = injectParentParams(p => p['id'] as string); // same as above but can be used with a custom transform function
 * const params = injectParentParams(); // returns the entire params object
 *
 * @param keyOrTransform OPTIONAL The key of the param to return, or a transform function to apply to the params object
 */
export function injectParentParams<T>(
	keyOrTransform?: string | ((params: Params) => T),
): Signal<T | Params | string | null> {
	assertInInjectionContext(injectParentParams);
	const route = inject(ActivatedRoute);

	if (typeof keyOrTransform === 'function') {
		return toSignal(route.parent.params.pipe(map(keyOrTransform)), { requireSync: true });
	}

	const getParam = (params: Params) =>
		keyOrTransform ? params?.[keyOrTransform] ?? null : params;

	return toSignal(route.parent.params.pipe(map(getParam)), { requireSync: true });
}

[eneajaho]

Hello, if you enable paramsInheritanceStrategy the utility should work out of the box.

More here: https://timdeschryver.dev/blog/til-paramsinheritancestrategy-to-always-have-access-to-parent-route-info#conclusion