I'm planning a simple learn management system for my pupils with a sidebar and a content area. Goal: Load subtopics in the sidebar with and load the related content in the content area beside it with a named router-outlet. So far...
routes.ts
export const routes: Routes = [
{ path: '', component: AppComponent },
{
path: 'planeGeo',
component: PlaneGeometryMainComponent,
children: [
{
path: 'top',
component: TestComponent,
outlet: 'content',
},
],
},
{
path: 'planeGeo/top1', //just for checking
component: TestComponent, //just for checking
outlet: 'content', //just for checking
},
];
app.component.html
<mat-drawer-container class="mat-drawer-container" autosize>
<mat-drawer #drawer class="sidenav" [opened]="true" mode="side">
<div class="logo-container">
<img class="logo" src="assets/img/logo.png" alt="" />
</div>
<router-outlet></router-outlet>
</mat-drawer>
<div class="example-sidenav-content">
<mat-toolbar>
<mat-icon class="menu-icon" (click)="drawer.toggle()">menu</mat-icon>
<span>lernen mal anders</span>
<span>Settings</span>
</mat-toolbar>
<div class="router-container">
<router-outlet name="content"></router-outlet>
</div>
</div>
</mat-drawer-container>When I now open http://localhost:.../planeGeo/(content:top) the sidenav content shows up, but not the content for the content area. For checking I implemented the last route, which works under http://localhost:.../(content:planeGeo/top1). There of course the sidebar content is missing.
I just started with named routing, but I'm really not able to figure out how to show up both contents (sidebar subtopics and the related content after clicking on them in the content area).
I know it's not a great architecture for now, I'm just prototyping. Would be great if someone with more expertise could help. I already watched some YT-vids (example 1, example 2. Thanks in advance
I solved it by putting the outlet in a seperated div, then it works fine.