router navigate doesn't redirect to other page

Question

I would redirect user to another page when he clicks on a datatable row

In HTML

<p-table  [value]="users" selectionMode="single"  [(selection)]="selectedUser" dataKey="uid" (onRowSelect)="selectedUserDetails($event)" styleClass="tab-result">

in TS file

selectedUserDetails(userDetails) {
   console.log(userDetails);
   console.log("enterhere"); // is printed on console dev
   this.router.navigate['/userdetails'];
}

In module routing

const routes: Routes = [
  {
    path: "",
    component: AdministrationComponent,
    children: [
      { path: "", component: ResulTabComponent, pathMatch: "full" },
      { path: "userdetails", component: UserDisplayComponent }
    ]
  }
];

For information administration route is lazy loaded on this path http://localhost:4200/administration

userdetails should be http://localhost:4200/administration/userdetails

In administration component

<router-outlet></router-outlet>

My problem is that when clicking I don't get redirected to the userdetails page but when I navigate to /userdails from url bar I see the component

or you could try this one too `this.router.navigateByUrl('/userdetails');` — Pardeep Jain, Jun 07 '18 at 12:14

score 11 · Answer 1 · answered Jun 07 '18 at 12:06

11

You have not called the function, you just try to access a property with name /userdetails in the navigate property. You missed ()

this.router.navigate(['/userdetails']);
                    ^                ^

answered Jun 07 '18 at 12:06

Suren Srapyan

66,568
14
114
112

It was just , just one more question I get `ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'userdetails' ` but I have defined the route – infodev Jun 07 '18 at 12:11
In the console try to look to which route it is trying to navigate ? – Suren Srapyan Jun 07 '18 at 12:12
That error is related with the fact that you did not configured your routes in your application. Please check how to configure application routes in Angular. You have to declare appRoutes, which you declared, then you have to export : export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); and then import routing in AppModule under imports. Check documentation on how to setup application routes. – Adrian Claudiu Dima Jun 07 '18 at 12:20
That's what I have made, when I navigate tu userdetails from the browser I land on the component userdetails so route declarations are working, only navigation causes problem – infodev Jun 07 '18 at 12:34

sai kiran · Answer 2 · 2018-06-07T13:00:03.597

0

add parentheses "()" and remove slash "/"

this.router.navigate(['userdetails']);

try routing like below:

const routes: Routes = [
  { path: '', component: ResulTabComponent },
  { path: "administration/userdetails", component: UserDisplayComponent }
]

edited Jun 07 '18 at 13:00

answered Jun 07 '18 at 12:36

sai kiran

557
2
5
16

Should I delete children attribute on parent path ? ( I have updated routes section in my post ) – infodev Jun 07 '18 at 12:43
Try this once : const routes: Routes = [ { path: '', component: ResulTabComponent }, { path: "userdetails", component: UserDisplayComponent } ] – sai kiran Jun 07 '18 at 12:44
But I dont' see administration component in your example. userdetails and result tab should be a it's childs – infodev Jun 07 '18 at 12:53
add administration before "userdetails" (administration/userdetails) { path: "administration/userdetails", component: UserDisplayComponent } – sai kiran Jun 07 '18 at 12:54

router navigate doesn't redirect to other page

2 Answers2

Linked