Navigating to a new page in angular not working

Question

Im new to angular and i have created website using angular. When i Login it shows the username in the top of the page(shown below)

my requirement is, when i click it i want to take the user to another(for example user details page) But what i have done in my .html and .ts files doesnt do anything

The relevant html code part

<div class="m-2"> 
<i class="fa cursor-pointer" (click)="Navigatekbuttonclick($event)">{{username}}</i>
</div>

the relevant .ts part

Navigatekbuttonclick(){
this.router.navigate([/userdetails]);
}

Can anybody help on this navigation part please and tell me whats missing

Answer 1

The path you passing in parameters needs to be in quotation marks.

Try this:

Navigatekbuttonclick(){
this.router.navigate(['/userdetails']);
}

But in order for that to work, you must define the route in your router :

{path:'/userdetails', component: userDetailComponent}

Here's a link that can help you : Angular Documentation