Change angular router URL scheme

Question

When I try to pass some parameters to my URL the angular router provides some URL schemes that I don't really like.

The URLS in this example look like this:

https://whatever.io/crisis-center;id=2;foo=foo

And I would like them to look like some 'conventional' URLs.

Something like: https://whatever.io/crisis-center?id=2&foo=foo

Is there a way to change the URL scheme for the Angular2^ router? If so, any advice or example on how to do it?

Sarthak Aggarwal · Accepted Answer · 2018-10-25 10:52:08Z

2

You can use query parameters when routing in angular

this.router.navigate(['/crisis-center'], { queryParams: { id: 2, 'foo': 'foo' } });

Your URL will look like this :

http://localhost:4200/crisis-center'?id=2&foo=foo

answered Oct 25, 2018 at 10:52

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

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

5 Comments

Some random IT boy Over a year ago

This is exactly what I have been looking for. Any tip on how to navigate relatively? For instance: im at name.io/somewhere and I'd like to navigate to name.io/somewhere/deeper?id=2&foo=foo. I just can get 'root' redirects of the URL. Thank you very much! (as soon as I can accept the answer I'll do so)

Sarthak Aggarwal Over a year ago

Import ActivatedRouter and make its instance in constructor, then use it while navigating, this.router.navigate(['crisis-center'], { relativeTo: this.activatedRoute, queryParams: { id: 2, 'foo': 'foo' } })

Some random IT boy Over a year ago

How should I get this.activatedRoute? I get an error saying that the property doesn't exist in my component.

Sarthak Aggarwal Over a year ago

import { ActivatedRoute } from '@angular/router'

Some random IT boy Over a year ago

I forgot to add it into the constructor thank you again

Collectives™ on Stack Overflow

Change angular router URL scheme

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related