Search code examples
angularangular2-routing

Create dynamic url in angular 6

I have Angular 6 app. In this need to create URL for each User.

I have created this URL in this format. This is working fine.

http://localhost:4200/profile/User1

I did this using this code {path: 'profile/:value}'. Where User1 is dynamic. It can be User2,User3, etc.

But I need URL in this format.

http://localhost:4200/user1-profile/

I did not any solution to create URL in this format. If this was in php, I can do that using htaccess like this /([^/]*)-profile/. But I don't know how to do same in Angular 6.

Solution

  • yes you are right using :value you can make it dynamic in the url, and define the route for this, anything you pass in place of that would be considered as the dynamic value and can be used.

    Now as per your requirement you want to have the user1-profile in the url. You can do this by using the following line in the routing module.

    {path: ':value-profile/}'

    and When you want to navigate to this you just add the following line in the .ts file.

      this.route.navigate([userid+'-profile'])