Angular 2 updating URL path params with no redirect

Question

Using Angular 2 how do you update the URL Path without redirecting the page.

I know you can access the params using ActivatedRoute queryParamMap Observable but what if I want to change these values and have those display in the URL.

Updating the values in the URL allows for easy bookmark-ability.

I don't want to redirect as the query params I am adding are simple data filter I want to store.

You can redirect with the router, if it's on the same component, it will only change the URL, and not the content of the page. Is it what you want, or do you want to reload the page too ? — user4676340
– user4676340, Commented Feb 14, 2018 at 12:42
How do I redirect? I do not want to reload. Sorry I don't have any sharable code yet as I am wanting to know upfront how this will work. — robinsio
– robinsio, Commented Feb 14, 2018 at 12:44
You should take a look at this: stackoverflow.com/questions/35618463/… It might work for you too! — Vincent Gagnon
– Vincent Gagnon, Commented Feb 14, 2018 at 12:50

Darpholgshon · Accepted Answer · 2018-02-14 13:40:00Z

1

In the component constructor subscribe the query parameter to your model.

this.route.queryParams.subscribe(params => {
  this.myValue = params['myValue'];
});

Now, register a listener function to the view model, or alternatively add a watch to your model. Then have a navigate function you can call once your model is updated:

navigate() {
    this.router.navigate([], {queryParams: { mValue: this.myValue }});
}

edited Feb 14, 2018 at 13:40

answered Feb 14, 2018 at 13:27

Darpholgshon

262 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kris Bonev Over a year ago

Is there a way to add params to queryParams without removing the previous ones? In the example it is basically a "=" sign, but I need it to be "+=". I want to add new value, but keep all previous ones.

charsi · Accepted Answer · 2018-02-14 13:01:49Z

0

Just have the same component for two different routes

const appRoutes: Routes = [
    { path: 'somepath', component: someComponent }, // yourapp/somepath
    { path: 'anotherpath', component: someComponent }, // yourapp/anotherpath
];

<a class="nav-link" routerLink="/anotherpath" routerLinkActive="active"> change path</a>

answered Feb 14, 2018 at 13:01

charsi

4,14728 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angular 2 updating URL path params with no redirect

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related