Angular Router Not Navigating Correctly on Custom Navigation, Page Reloads Instead

I have a card:

<div
class="flex gap-5 justify-left items-center text-center pl-5 group hover:cursor-pointer m-3 backdrop-blur-md"
(click)="navigateTo(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>


with its .ts file

export class DashboardNavCardComponent {
@Input() icon: string = '';
@Input() title: string = '';
@Input() link: string = '';
@Output() navigate: EventEmitter<string> = new EventEmitter<string>();

navigateTo(path: string): void {
this.navigate.emit(path);
}
}


and the parent component:

<app-dashboard-nav-card
[icon]="opt.icon"
[title]="opt.title"
[link]="opt.route"
(navigate)="onNavigate($event)"
></app-dashboard-nav-card>



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


and then function:

onNavigate(route: string): void {
const fullPath = `./dashboard/${route}`;
console.log(fullPath);
this.router.navigate([fullPath]);
}


and the routes.ts

path: 'dashboard',
component: UserDashboardPageComponent,
children: [
{
path: '',
component: DashboardSummaryComponent,
title: 'Panel użytkownika',
},
{
path: 'official-exams',
component: OfficialMaturaExamsComponent,

},
{
path: 'mock-exams',
component: MockMaturaExamsComponent,


and the page:

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


i tried to reinvent rounting because using routerLink didnt work. So now i can make a console log of a route and it is good. But instead of navigating to that route, the page blinks and reloads and nothing happens. I can manually enter these routes, but not using router. Why it is so? Why the router doesnt work and the app reloads like it didnt match the path, but manually i can access these components?

Continue reading...