Angular navigate to url by replacing an existing parameter

Question

In our Angular App we have a DropDown component which is populated with years.

Once we select an year, we need to change the router url, to be something like:

url/customers/2015

url/customers/2016

url/customers/2017

OR

url/customers/some-other-page/2015

url/customers/some-other-page/2016

url/customers/some-other-page/2017

This works, but we delegate the change event of the dropdown to the components that need it. That is fine!

BUT we thoughtit would make our life easier, if the component makes the route change by itself.

We tried:

  public onChange(year): void {   
    this.router.([this.router.url, year]);
  }

This works only in the first time, the second time the url looks like this:

url/customers/some-other-page/2017/2018

The third time:

url/customers/some-other-page/2017/2018/2019

and so on...

Question:

So, how do I get the parameter of my router and replace it with the current paremeter?

You are using relative routes, use absolute routes `this.router.(['/customers', 'some-other-page', year]);` note the `/customers` — Fabio Antunes, Jul 05 '17 at 15:53
Possible duplicate of [routerLink appends my link](https://stackoverflow.com/questions/40103272/routerlink-appends-my-link) — Fabio Antunes, Jul 05 '17 at 15:53
It's not a really a duplication. I checked the link... I need to navigate from my `DropDownComponent` so there I have to get my current url and append with the new selected value of the DropDown — DAG, Jul 05 '17 at 15:59
Could you make the year a query parameter instead of a required parameter? Then you could just change the query parameter part without changing the "base" route. — DeborahK, Jul 05 '17 at 16:15
That is what I'm trying to do :) It seems like this would work with QueryParameter @DeborahK, I'm just looking in the docs right now to see how I can replace the url paremeter instead of rewriting the entire url — DAG, Jul 05 '17 at 16:22
I just found the answer here: https://stackoverflow.com/questions/39400997/angular-2-new-router-change-set-query-params — DAG, Jul 05 '17 at 16:24

DeborahK · Accepted Answer · 2017-07-05T17:39:46.223

Here is some info on using query parameters:

You can then read the query parameters using syntax like this:

ngOnInit(): void {
    this.listFilter = this.route.snapshot.queryParamMap.get('filterBy') || '';
    this.showImage = this.route.snapshot.queryParamMap.get('showImage') === 'true';
    . . .
}

Or if you want to be notified when the query parameters change, you can do something like this:

ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => this.filterBy = params.get('filterBy'));
    . . .
}

NOTE: From the docs:

Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.

params — An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

queryParams — An Observable that contains the query parameters available to all routes. Use queryParamMap instead.

my solution was simply navigating like so: `this.router.navigate([], { queryParams: { year: value } , relativeTo: this.activatedRoute });`. Thanks for your input, for sure really helpful. — DAG, Jul 05 '17 at 16:54
this.activatedRoute.queryParams.subscribe(params => { this.selectedYear = Number(params["year"]) || years[0]; this.getCustomersByYear(this.selectedYear); }); — DAG, Jul 05 '17 at 17:02

Angular navigate to url by replacing an existing parameter

1 Answers1

Linked