Angular 5 router - how to replace a string in the url without changing the state?

Question

I have an Angular 5 application, I use the angular router, most of my entry route components placed under a context id which represents a name in the app store (and some more data relevant for that context), I use the id for proper fetching, despite that the name is in most cases unique, I rather use an id.

So currently my url contains an id and I want it to contain a name instead without changing the state,

From: 'www.somesite/5/things'
To: 'www.somesite/five/things'

I want to keep the param as id, meaning when I'll subscribe to that route params I would get the id and I wont have to modify the router confoguration to be: name instead of id?

Can I achieve such scenario?

Why would you want to? If the user tries to share that URL, or save it as a bookmark, it will be incorrect — user184994
@user184994 that's actually a good point, so I acn't avoid using a name as an identifier or I'll just add the name as a route param as well.. I aimed to let the user a better ux by getting a context by the url and numeric id isn't perfect, thanks for your comment you made me to change the approach!! — liron_hazan

hamilton.lima hamilton.lima · Accepted Answer · 2018-06-02T21:55:43

Create a Guard that checks for the variable parameter, if it's string search the id based on the name and redirect to the same url with the found id parameter.

Check this example enter link description here

Angular 5 router - how to replace a string in the url without changing the state?

1 Answers