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

thanks buddy but still no good!!! some developers say theres a long proceedure called modifying routes..do u have any idea about that?? — Prog_Rookie, Mar 13 '18 at 19:56

Sébastien Labine · Answer 1 · 2018-03-13T20:10:41.180

0

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

edited Mar 13 '18 at 20:10

answered Mar 13 '18 at 19:58

Sébastien Labine

1
3

OP already mentioned that it did not help... issue is something else it seems – blurfus Mar 13 '18 at 20:01
what are the scripts i should define the above three? :) – Prog_Rookie Mar 13 '18 at 20:05
1

@Prog_Rookie The same question has been answer over here: https://stackoverflow.com/questions/33571605/angular-2-how-to-navigate-to-another-route-using-this-router-parent-navigate – Sébastien Labine Mar 13 '18 at 20:06

Navigating to a new page in angular not working

1 Answers1