0

I have some filters which when they are checked they apply an id to the url under the same queryParam. I'm using router.navigate method. I can get them to show as a list like so:

http://localhost/view/?opts=1-1 // one filter selected
http://localhost/view/?opts=1-11-2 // two filters selected

However I'd like the URL or specifically the query params' value to be separated by a ampersand '&'. Like so:

http://localhost/view/?opts=1-1&1-2 // two filters selected

Here's my current code:

this._router.navigate([routeUrl], { queryParams: {opts: filterParams}});

I've tried setting filterParams as an array but that just duplicates the property value. Is there an Angular way to achieve this or will I need to resort back to JS or jQuery?

GBrooksy
  • 363
  • 5
  • 15
  • `http://localhost/view/opts=1-1&1-2` isn't a correct URL representation of what you're describing, it should be e.g. `http://localhost/view/?opts=1-1&opts=1-2`, which I'd guess is what Angular is generating. – jonrsharpe Mar 20 '18 at 10:45
  • @jonrsharpe thanks for noticing this, you're right I was meant to put this. – GBrooksy Mar 20 '18 at 10:56
  • Just to clarify I don't want the following result: `http://localhost/view/?opts=1-1&opts=1-2` as 'opts=' is duplicated – GBrooksy Mar 20 '18 at 11:05
  • But that's what you're *supposed* to get, that's what most servers want. See e.g. https://stackoverflow.com/a/24728298/3001761. Please give a [mcve] that shows the inputs, current outputs and expected outputs. But if you really want `opts=1-1&1-2`, why not just built that string as a single value `{ opts: '1-1&1-2' }`? – jonrsharpe Mar 20 '18 at 11:06

1 Answers1

0

As per the documentation, if you want to read your URL params with Angular, you should use the matrix notation, proposed by Tim Berners-Lee.

If your URL parameters aren't recognized by your routing strategy, they will appear as optional parameters, written in matrix style.

If you decide to go with your own way, then you will need to manually parse the URL to get your parameters.

  • why the downvote though, that's how optional parameters are handled in Angular ... –  Mar 20 '18 at 11:24