Angular loading component based on route parameter

Question

I want to load component based on URL parameter when the user clicks on a link in the home component. For exmaple user is at "/home" which have a list of links

Link 1 Link 2

When the user clicks on Link 1 or 2, I want to load the details component and the url should be '/home/details/1' the "1" in the end is a route parameter.

Same thing happens when user clicks on Link 2, same details component is loaded but the parameter is "2" and url changes to '/home/details/2'

I have tried the following in routing module, the url changes but details component does not loads and no error is reported in the console.

const routes: Routes = [
  {
     path:'',
     component:HomeComponent,
     children:[
      {
        path:':id',
        component:DetailsComponent
      }]
   }
]

And the anchor tags are:

<a [routerLink]="[1]">Link 1</a>
<a [routerLink]="[2]">Link 2</a>

How are you calling the DetailsComponent? Can you share that code as well? — Faisal Mehboob
– Faisal Mehboob, Commented Jan 3, 2022 at 23:09
I am calling the detail component like <a [routerLink]="['detail', 1 ]">Link 1</a> — Max
– Max, Commented Jan 4, 2022 at 1:40

Kapil Aananth · Accepted Answer · 2022-01-04 04:46:48Z

2

If you want to redirect to certain pages you can always use this

In RouteModule
    const routes: Routes = [
      {
         path:'Home',
         component:HomeComponent,
         children:[
          {
            path:':id',
            component:DetailsComponent
          }]
       }
    ]

    In Html

    <a [routerLink] = ['/Home','1'] >Link 1</a>
     <a [routerLink] = ['/Home','2']>Link 2</a>

answered Jan 4, 2022 at 4:46

Kapil Aananth

442 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

I tried the above example, only URL changes, the DetailsComponent does not show.

Pieterjan · Accepted Answer · 2022-01-03 21:46:58Z

1

Try <a [routerLink]="['/home',2]">Link 2</a> and

const routes: Routes = [
  {
     path:'home',
     component:HomeComponent,
     children:[
      {
        path:':id',
        component:DetailsComponent
      }]
   }
]

Also you should generate your pages with the following command:

ng g module detail --module person --route {personid}/detail

answered Jan 3, 2022 at 21:46

Pieterjan

3,7094 gold badges37 silver badges83 bronze badges

1 Comment

Max Over a year ago

I cannot use 'path:'home', as the home is inside an angular module

Collectives™ on Stack Overflow

Angular loading component based on route parameter

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related