Is it possible to map multiple query string parameters to a property of an Angular service component?

Question

Question: Is it possible to retrieve a collection of query string values and assign them to a property of type Filter in a service component class?

interface Filter{
    title?: string;
    genreId?: number;
    inCinemas?: boolean;
    upcomingReleases?: boolean;
}

rather than doing the following tedious, error prone of retrieval and assignment?

constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
  this.route.paramMap.subscribe({
    next: params => this.title = params.get('title'),
    error: e => console.log(e)
  });
  this.route.paramMap.subscribe({
    next: params => this.genreId = params.get('genreId'),
    error: e => console.log(e)
  });
  this.route.paramMap.subscribe({
    next: params => this.inCinemas = params.get('inCinemas'),
    error: e => console.log(e)
  });
  this.route.paramMap.subscribe({
    next: params => this.UpcomingReleases = params.get('upcomingReleases'),
    error: e => console.log(e)
  });
}

Are you trying to get query string values or path params? they are two different things in Angular `query strings` come after the `?` such as `?user=123`, and `params` are placeholders in your path such as `/user/:id` where `id` is a placeholder. — Get Off My Lawn, Jul 01 '22 at 21:59
@GetOffMyLawn: I want to map `https://localhost:40443/MoviesController/ActionMethod?title="Batman"&genreId="1000"&inCinemas="true"` to a property of type `Filter` (and set the missing value to `null`). They will be used to filter a movie in an asp.net core webapi. — Second Person Shooter, Jul 01 '22 at 22:02
It seems to me this feature does not exist. I already searched everywhere with no result. — Second Person Shooter, Jul 01 '22 at 22:11

Get Off My Lawn · Accepted Answer · 2022-07-01T22:26:47.410

0

You could make it very simple, as long as your class properties are the same name as the query string keys, you can do something like this:

export class SearchPageComponent {
  title = '';
  genreId = '';
  inCinemas = '';
  upcomingReleases = '';
 
  constructor(private readonly route: ActivatedRoute) { }

  ngOnInit() {
    // Don't forget to unsubscribe
    this.route.queryParams.pipe(
      // Send each query param as a string to the next pipe individually
      concatMap(i => Object.entries(i)),
      // filter only continue with the current key if the property exists in the class
      filter(([key]) => key in this),
      // Assign the item to the property
      tap(([key, val]) => (this as any)[key] = val)
    ).subscribe(i => console.log(i));
  }
}

edited Jul 01 '22 at 22:26

answered Jul 01 '22 at 22:15

Get Off My Lawn

34,175
38
176
338

It implies that the auto mapping feature does not exist, right? – Second Person Shooter Jul 01 '22 at 22:17
1

Yeah I would say so, I have never seen automapping in angular. – Get Off My Lawn Jul 01 '22 at 22:19
Someone told me this answer: https://stackoverflow.com/a/65942191/397524. – Second Person Shooter Jul 02 '22 at 11:08
1

That looks like it opposite of what you want. That converts the object to a query string, you want a querystring to object/properties. – Get Off My Lawn Jul 02 '22 at 14:37

Get Off My Lawn · Answer 2 · 2022-07-02T15:39:06.890

You could create a decorator that you can attach to properties that will read the URL query parameters and get the proper one, this would then automatically assign the param value to the property. The decorator would look like this:

export function QueryParam(key?: string) {
  return (target: object, propertyKey: string) => {
    Object.defineProperty(target, propertyKey, {
      get: () => {
        const query = Object.fromEntries(new URLSearchParams(location.search));
        const find = key ?? propertyKey;
        return query[find];
      },
      set: (newVal: string) => newVal
    });
  };
}

The decorator will use the property that it is attached to, to get the value from the query params. If the query param is different than the property name, you can pass the name of the query param as an argument.

Then you would attach it to the property like this:

import { QueryParam } from '/my/decorators/http'

export class SearchPageComponent {
  @QueryParam() title = '';
  @QueryParam() genreId = '';
  @QueryParam() inCinemas = '';
  @QueryParam('customQueryKey') upcomingReleases = '';
}

You may also need to add DOM.Iterable to your tsconfig.json:

{
  "compilerOptions": {
    "lib": [
      "DOM.Iterable"
    ]
  }
}

Is it possible to map multiple query string parameters to a property of an Angular service component?

2 Answers2