I am working on a project that includes the following components:
TodosComponent (path: './todos/'): displaying <p>TODO WORKS</p>
AddTodosComponent (path: './todos/add'): showing
<p>ADD TODO WORKS</p>DeleteTodosComponent (path: './todos/delete'): presenting
<p>DELETE TODO WORKS</p>Both Add and Delete are nested routes within Todos.
In my main AppComponent, I have a side navigation with links for all 3 components (TodosComponent, AddTodosComponent, DeleteTodosComponent).
The issue arises when attempting to display the contents of the clicked component in the content area of AppComponent. On clicking child routes, an error is triggered: "Cannot match any routes. URL Segment: 'todos/add'"
How can I ensure that clicking a link in the sidenav displays the corresponding HTML content from the component?
app-routing.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: '/todos', pathMatch: 'full' },
{ path: 'todos', component: TodosComponent, pathMatch: 'full', children: [
{ path: 'add', component: AddTodoComponent},
{ path: 'delete', component: DeleteTodoComponent},
]},
]
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
app.component.html
<mat-sidenav-container>
<mat-sidenav opened="true" mode="side" fixedInViewport="true">
<p>I am the sidenav</p>
<mat-nav-list>
<mat-list-item>
<a matLine routerLink="/todos">List Todos</a>
</mat-list-item>
<mat-list-item>
<a matLine routerLink="/todos/add">Add Todo</a>
</mat-list-item>
<mat-list-item>
<a matLine routerLink="/todos/delete">Delete Todo</a>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<p>Main Content</p>
</mat-sidenav-content>
</mat-sidenav-container>
My goal is to achieve something similar to this: https://i.sstatic.net/QgvSd.jpg