Routing With ID in Angular 4

Question

I need help in my routing in Angular 4. I want to display the URL like this. Localhost:4200/user/1 if i clicked the view details of the first user. I'm a bit confused on how to to this. I've tried my best in my code below but it still doesn't work.

app-routing.module.ts

    const appRoutes: Routes = [
        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'user', component: UserComponent, children: [
            
            { path: 'create-new-user', component: CreateNewUserComponent },
            { path: 'user-list', component: UserListComponent },
            { path: 'user-detail/:id', component: UserDetailComponent },

    ]},
    ];
    
    
    @NgModule({
        imports: [RouterModule.forRoot(appRoutes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule {
    
    }

Answer 1

I had this very problem a while ago. The problem here is the routes configurations you have. You cannot go to /user/1 because you defined the 'user-details' route as a child of the 'user' route. You either have to navigate to '/user/user-detail/1' or simply define a new child route with path ':id' pointing to your details component and you'll be able now to navigate to '/user/1'.

To sum up: With the routes:

const appRoutes: Routes = [
    ...
    { path: 'user', component: UserComponent, children: [

        ...
        { path: 'user-detail/:id', component: UserDetailComponent },

    ]},
];

you can navigate to '/user/user-details/1'. With the routes:

const appRoutes: Routes = [
    ...
    { path: 'user', component: UserComponent, children: [

        ...
        { path: ':id', component: UserDetailComponent },

    ]},
];

you can navigate to '/user/1'. Hope it helps you.

Answer 2

In your routing file

const appRoutes: Routes = [ 
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
  { path: 'dashboard', component: DashboardComponent },
  { path: 'user', component: UserComponent, children: [
    { path: 'create-new-user', component: CreateNewUserComponent }, 
    { path: 'user-list', component: UserListComponent },
    { path: ':id', component: UserDetailComponent }
  ]}
]; 

In your view method do like that

ViewuserDetail(user_id : any){
   let url: string = "/user/" + user_id
        this.router.navigateByUrl(url);
     }

In your template

<td><button class="btn btn-primary"  (click)="ViewuserDetail(user_object.id)">View</button></td> 

Answer 3

I think your ViewDetail() method needs an index parameter. e.g.

public ViewDetail(index: number)
{
  this.index = index;
  ...
}

There's a great example here for the routing itself. They use the following route definition:

const routes: Routes = [
  ...
  { path: 'detail/:id', component: HeroDetailComponent },
  ...
];

As for the typescript code.

gotoDetail(): void {
  this.router.navigate(['/detail', this.selectedHero.id]);
}

So, I think you're on the right track there.

I think it's just the index not being set.

Answer 4

It should be something like this

  ViewDetail(index : any){
    this.router.navigate(['/user-detail', index]);
  }

If you want the url as listed /user/1 then change the router configuration to match the name i:e instead of user-detail change to user

UPDATE

Ya there is change the template line to this

<td><button class="btn btn-primary" style="cursor: pointer;" (click)="ViewDetail(i)">View</button></td> // it should be i instead of index