RFC: Add utility for Router/State Binding

[alcaidio]

I have a feature proposal that I'd like to discuss with you all.

The idea is to create a utility to bind our application state with our router, particularly focusing on query parameters. This would enable synchronization, for instance, of filters with the route of an e-commerce site.

Consider the following interfaces:

interface Product {
    id: number;
    name: string;
    brand: string;
    category: string;
    price: number;
}

interface FilterOptions {
    brand: string[];
    category: string[];
    price: {
        min: number;
        max: number;
    };
}

The route could then take the form:

https://example.com/products?brand=nike,adidas&category=shoes&price-min=30&price-max=90

What we aim for is to bind to our route declaratively without dealing with the activatedRoute.params observable directly. For example:

@Injectable({ providedIn: 'root' })
export class ProductService {
	products = signal<Product[]>([]);
  	filters = signal<FilterOptions>({});
  
	bindWithRouter(this.filters); // Naming and configuration to be considered...
}

Here's a proposed implementation for bindWithRouter, which would facilitate developing the feature (to be made generic with strict typing, of course):

	router = inject(Router);
  	route = inject(ActivatedRoute);

  	constructor() {
    	const updateStateFromRoute$ = this.route.queryParams.pipe(
        	tap((queryParams) => {
          		const reducer = (acc: Filters, curr: [string, string]) => {
            		const [key, values] = curr;
            		return { ...acc, [key]: values.split(',') };
          		};
          		const filters = Object.entries(queryParams).reduce(
            		reducer,
            		{} as Filters
          		);
          		this.filters.set(filters);
        	})
      	);

		const updateRouteFromState$ = toObservable(this.filters).pipe(
        	skip(1), // To skip initial state of filters and use state from queryparams if exist
        	tap((filters) => {
          		const reducer = (acc: Params, curr: [string, string[]]) => {
            		const [key, values] = curr;
            		return { ...acc, [key]: values.join(',') };
          		};
          		const queryParams = Object.entries(filters).reduce(reducer, {});
          		this.router.navigate([], {
            		relativeTo: this.route,
            		queryParams,
					queryParamsHandling: 'merge',
          		});
        	})
      	);
      
      	merge(updateStateFromRoute$, updateRouteFromState$)
      		.pipe(takeUntilDestroyed())
      		.subscribe();
  	}

This discussion aims to explore whether there is a real need for this feature and to collaboratively define its scope and specifications. After reaching consensus during this initial phase (if there is a need), I'm eager to take the next step and bring this feature to life, realizing my aspiration to contribute meaningfully to the Angular ecosystem. 🤩

Your thoughts and suggestions on this proposal would be highly appreciated!

[eneajaho]

Hi,
I tried to do something like this, automatic synchronization of queryParams, but the issues is:
There are cases where we want to keep some queryParams, and cases when we want to merge, or remove or do a lot of other things, and that's why navigate method of the router includes a lot of other keys in there that we would need to support or duplicate.

That's why there's nothing in ngxtension that simplifies this.

[alcaidio]

It's a pity, because I think that for simple and common cases as described above it would have been practical, but I note that it's not generic enough to be included in this repo ;)