Angular Nested Routing: Navigation Not Updating with RouterLink

I have a route config

{
path: 'dashboard',
component: UserDashboardPageComponent,
title: 'xyz',
children: [
{
path: '',
component: DashboardSummaryComponent,
title: 'Panel użytkownika',
},
{
path: 'official-exams',
component: OfficialMaturaExamsComponent,
title: 'aaa',
},
{
path: 'mock-exams',
component: MockMaturaExamsComponent,
title: 'bbb',
},
{
path: 'exams-exercises',
component: MaturaExamsExcercisesComponent,
title: 'ccc',
},


and then the dashboard page:

<section class="flex h-[100vh]">
<app-dashboard-navigation class="min-w-[20rem]"></app-dashboard-navigation>
<router-outlet></router-outlet>
</section>


to navigate through sections i created a card:

<div
class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
[routerLink]="link"
>
<ng-icon
class="text-3xl group-hover:text-cyan-600 transition-all duration-300"
[name]="icon"
></ng-icon>
<p
class="text-xl font-bold group-hover:text-cyan-600 transition-all duration-300"
>
{{ title }}
</p>
</div>


and then the nav:

menu: any[] = [
{
icon: 'tablerAtom',
title: '',
route: '/official-exams',
},
{
icon: 'tablerPaperclip',
title: '',
route: '/mock-exams',
},
{
icon: 'tablerNotebook',
title: '',
route: 'exams-exercises',
},
];


and then:

@for(opt of menu; track opt){
<app-dashboard-nav-card
[icon]="opt.icon"
[title]="opt.title"
[link]="opt.route"
></app-dashboard-nav-card>
}


so with the nav on the left i want to navigate to /dashboard/official-exams or /dashboard//mock-exams.

But now it doesnt work. It doesnt throw any error in console, but its a blink change in the url and nothing changes.

Continue reading...