Angular 18 Route to nested components

I have Login Component which is initial Page. On success of Login it will route to Home Component which will hold 3 components : TopBar Component which has nav bar & 2 components save data & data list. I want , when user click on nav bar saveData it should show SaveData Component and when user click DataList it should show Datalist page.

My route.ts code is :

import {Routes} from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { SavedataComponent } from './savedata/savedata.component';
import { DatalistComponent } from './datalist/datalist.component';

const routeConfig: Routes = [
{ path: '', component:LoginComponent },
{ path: 'home', component: HomeComponent,
children: [
{path: 'savedata',component:SavedataComponent},
{path: 'satalist',componentatalistComponent},
]
}
];
export default routeConfig;


When user clicks on button on login component it is routing to home component. My home.componet.html is :

<app-topbar></app-topbar>
<section class="presentation">
<app-savedata></app-savedata>
</section>


and topbar.html is

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" [routerLink]='["savedata"]' routerLinkActive="active_route">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]='["datalist"]' routerLinkActive="active_route" >List</a>
</li>
</ul>


When I click on List on nav bar it is not going to List page/component. I can see in console :core.mjs:7191 ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'home/datalist' What am i doing wrong? How do i get this to work?

Continue reading...