I want to change my url /blog/:id
to /blog/blog-title
after i get blog title from resolver. Example: When i navigate to blog/1
and the blog with id 1 has title how-can-i-make-this
then the url should be /blog/how-can-i-make-this
. How can i do this in angular 4?
Asked
Active
Viewed 2,600 times
0

Nhật Anh
- 105
- 3
- 13
-
have you tried something? – Jota.Toledo Nov 06 '17 at 18:12
-
i have searched with keywords like "change url without reloading in angular", "slug url in angular"... but nothings solves my problem – Nhật Anh Nov 06 '17 at 18:15
2 Answers
0
Use Angular's router and use its navigate function:
Typescript
import {Router} from '@angular/router'; // import the router
constructor(private router:Router){} //put this in your contructor
// call this when you want to change you want to change the url
somefunction() {
this.router.navigate(['how-can-i-make-this']).then(response => {
console.log(response);
});
}
If you don't want to reload then see this answer: Change route params without reloading in angular 2

Chris Sharp
- 2,005
- 1
- 18
- 32
-
Thanks for the answer. I tried location.go() and it's great. But i want when i refresh the browser with url '/blog/how-can-i-make-this' it should navigate to the same. May be something like '/blog/how-can-i-make-this-1' and i can get the id in the end? – Nhật Anh Nov 06 '17 at 18:33
0
try below,
window.history.pushState(null, "Title", "/<blog-title>");
read more about pushState() here.

Madhu Ranjan
- 17,334
- 7
- 60
- 69
-
I would recommend to use the router service instead of the window object. – Jota.Toledo Nov 06 '17 at 18:32
-
I used location.go() and the result is great. Thank you anyway, i will read more about pushState() – Nhật Anh Nov 06 '17 at 18:34