Component is loading in a new page instead in the same page

I don't have much experience with frontend and I am facing a problem using Angular.

I have a page with a mat-sidenav-content and inside this content I want to load a component when I click to a link in my mat-sidenav . The problem is, everytime that I click in a link in my sidenav, the component is not rendered inside the mat-sidenav-content, the content is load in another page.

I will let some code below of how I implemented that:

main-menu.component.html:

<mat-toolbar class="mat-elevation-z3">
<button mat-icon-button (click)="collapsed.set(!collapsed())">
<mat-icon>menu</mat-icon>
</button>
<mat-label>My Financial Manager</mat-label>
<span class="spacer"></span>
<span>{{ currentDate | date: 'dd/MM/yyyy, HH:mm:ss' }}</span>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav opened mode="side" [style.width]="sideNavWidth()">
<app-custom-sidenav [collapsed]="collapsed()"/>
</mat-sidenav>
<mat-sidenav-content class="content" [style.margin-left]="sideNavWidth()">
<router-outlet></router-outlet>
oie
</mat-sidenav-content>
</mat-sidenav-container>


main-menu.component.css

.content{
padding: 24px;
}

mat-toolbar{
position: relative;
z-index: 5;
}

mat-sidenav-container{
height: calc(100vh - 64px);
}

.spacer {
flex: 1 1 auto;
}


main-menu.component.ts

import { Component, computed, OnInit, signal } from '@angular/core';
import { MenuService } from '../../services/main-menu/menu.service';

@Component({
selector: 'app-main-menu',
templateUrl: './main-menu.component.html',
styleUrl: './main-menu.component.css'
})
export class MainMenuComponent implements OnInit{

user: any;
currentDate: Date = new Date();
collapsed = signal(false);
sideNavWidth = computed(() => this.collapsed() ? '65px' : '250px');

constructor(
private menuService: MenuService
){}


ngOnInit(): void {
this.user = this.menuService.getUser();
setInterval(() => {
this.currentDate = new Date();
}, 1000);
}
}



custom-sidenav.component.html

<div class="sidenav-header">
<img [width]="profilePicSize()" [height]="profilePicSize()" src="assets/images/profile.png" class="profile-picture">
<div class="header-text" [class.hide-header-text]="sideNavCollapsed()">
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
</div>
</div>

<mat-nav-list>
<a
mat-list-item *ngFor="let item of menuItems()"
[routerLink]="item.route"
routerLinkActive
#rla="routerLinkActive"
[activated]="rla.isActive">
<mat-icon matListItemIcon>{{item.icon}}</mat-icon>
<span matListItemTitle *ngIf="!sideNavCollapsed()">{{item.label}}</span>
</a>
</mat-nav-list>


custom-sidenav.component.css

.profile-picture{
border-radius: 100%;
object-fit: cover;
}

.sidenav-header{
padding-top: 24px;
text-align: center;
}

.header-text{
> h2{
margin: 0;
font-size: 1rem;
line-height: 1.5rem;
}

> p {
margin: 0;
font-size: 0.8rem;
}
}

.hide-header-text{
opacity: 0;
height: 0px;
}


custom-sidenav.component.ts

import { Component, computed, Input, signal, OnInit } from '@angular/core';
import { MenuItem } from '../../../models/menu-type';
import { MenuService } from '../../../services/main-menu/menu.service';

@Component({
selector: 'app-custom-sidenav',
templateUrl: './custom-sidenav.component.html',
styleUrl: './custom-sidenav.component.css'
})
export class CustomSidenavComponent implements OnInit{

user: any;

sideNavCollapsed = signal(false);
@Input() set collapsed(val: boolean){
this.sideNavCollapsed.set(val)
}

constructor(
private menuService: MenuService
){}


ngOnInit(): void {
this.user = this.menuService.getUser();
}

menuItems = signal<MenuItem[]>([
{
icon: 'dashboard',
label: 'Dashboard',
route: 'dashboard',
},
{
icon: 'account_balance_wallet',
label: 'Cash control',
route: 'cash-control',
},
{
icon: 'trending_up',
label: 'Investments',
route: 'investments',
}

]);

profilePicSize = computed(() => this.sideNavCollapsed() ? '32' : '100');


}


app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { NewUserComponent } from './components/new-user/new-user.component';
import { MainMenuComponent } from './components/main-menu/main-menu.component';
import { InvestmentCreateComponent } from './components/investments/investment-create/investment-create.component';
import { InvestmentListComponent } from './components/investments/investment-list/investment-list.component';
import { CashControlCreateComponent } from './components/cash-control/cash-control-create/cash-control-create.component';
import { CashControlListComponent } from './components/cash-control/cash-control-list/cash-control-list.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const routes: Routes = [
{ path: '', pathMatch: 'full' ,component: LoginComponent },
{ path: 'new-user', component: NewUserComponent },
{ path: 'home', component: MainMenuComponent },
{ path: 'investments/new', component: InvestmentCreateComponent },
{ path: 'home/investments', component: InvestmentListComponent },
{ path: 'cash-control/new', component: CashControlCreateComponent },
{ path: 'home/cash-control', component: CashControlListComponent },
{ path: 'home/dashboard', component: DashboardComponent },

];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }



I didnt try anything else, tryied ChatGPT and didn't work

How can I fix this? Thanks in advance.

Continue reading...