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.