Challenges in Angular Component Routing

Question

I have defined a child component routing.

I am not able navigate to the default routing from the routerLink.
Parent path has ':id', so for children routing it's working with a prefix ':id' only.

Route

{
    path: ':id', component: InterviewComponent,
    children: [                          
      {
        path: '',
        component: InterviewQuestionsComponent
      },
      {
        path: ':id/interview',
        component: InterviewGridComponent
      }
    ]

  }

Anchor tags

<ul class="list-unstyled components">
      <li>
        <a routerLink=""><i class='interviewQuestions'></i>&nbsp; <span style="cursor: pointer;">Interview Questions</span></a>
      </li>
      <li>
        <a routerLink=":id/interview"><i class='interviews'></i>&nbsp; <span style="cursor: pointer;">Interviews</span></a>
      </li>
    </ul>

<router-outlet></router-outlet>

I am not able to navigate to default router with 'routerLink=""'
Routes working only with "path: ':id/interview'"

yashpatelyk yashpatelyk · Accepted Answer · 2019-06-18T08:56:49

There are couple of things that I observed here,

if I understand you correctly what you are trying to do is,

/1 should render InterviewQuestionsComponent

/1/interview should render InterviewGridComponent

right? correct me if I am wrong.

if this is what you want then modify your routes with below,

{
path: ':id', component: InterviewComponent,
children: [                          
  {
    path: '',
    component: InterviewQuestionsComponent
  },
  {
    path: 'interview',
    component: InterviewGridComponent
  }
]
}

To navigate to each of these components, you will need 'id', which is a path param, so what you have done in routerLink is not correct.

modify it like below,

<ul class="list-unstyled components">
  <li>
    <a routerLink="1"><i class='interviewQuestions'></i>&nbsp; <span style="cursor: pointer;">Interview Questions</span></a>
  </li>
  <li>
    <a routerLink="1/interview"><i class='interviews'></i>&nbsp; <span style="cursor: pointer;">Interviews</span></a>
  </li>
</ul>

Here I have hardcoded '1' in the path, you can make it dynamic using Angular bindings. Here's a working example on stackblitz.

https://stackblitz.com/edit/angular-wipkyq

Challenges in Angular Component Routing

1 Answers