How to create dynamic url with logged in username in Angular 8

Question

I have never done this before so that is why i have put this question here and need an explanation or an example blog that can tell me exactly how i can create a dynamic url like this demo.com/username. Currently my routes are working like this demo.com/settings/emailsettings but i need to implement the logic that it becomes demo.com/username/settings/emailsettings.

Note: The above urls are just for example and they are not real.

@Mises in the explanation of my question i did say that the above written urls are not real and are only written so that people can get an idea of what i want to do — Ehsan Nissar, Oct 03 '19 at 16:44
Sorry but i have no any simple project so i could show you how it works try to find some tutorial. — Mises, Oct 03 '19 at 17:12

score 2 · Accepted Answer · answered Oct 03 '19 at 20:36

in your routes you need to define a param

{
  path: '/:username/settings/emailsettings',
  component: YourComponent
}

Then, when navigate by code you will pass the username to the route dynamically.

From component class:

this.navigate([user.username, 'settings', 'emailsettings'];

From component template

[routerLink]="[user.username, 'settings', 'emailsettings']"

score 1 · Answer 2 · answered Oct 03 '19 at 19:17

1

Please try below code:

let url='demo.com/settings/emailsettings';
let pos=url.indexOf('/')+1;
let userName='myUserName/';
let outputUrl=[this.url.slice(0,pos),userName,this.url.slice(pos)].join('');

answered Oct 03 '19 at 19:17

Piyali Das

80
5

How to create dynamic url with logged in username in Angular 8

2 Answers2