title: Display component data from nested routes - Angular
body: <p>I have the following components:</p>
  
  <p>TodosComponent (path: './todos/'): with html content <code>&lt;p&gt;TODO WORKS&lt;/p&gt;</code></p>
  
  <p>AddTodosComponent (path: './todos/add'): with html content <code>&lt;p&gt;ADD TODO WORKS&lt;/p&gt;</code></p>
  
  <p>DeleteTodosComponent (path: './todos/delete'): with html content <code>&lt;p&gt;DELETE TODO WORKS&lt;/p&gt;</code></p>
  
  <p>Add and Delete are nested routes in Todos.</p>
  
  <p>In my main AppComponent I have a sidenav with links for the 3 components (TodosComponent, AddTodosComponent, DeleteTodosComponent).</p>
  
  <p>I am trying to display in the content area of AppComponent the contents of the 3 components whenever one is clicked from the sidenav.
  <strong>When I click the child routes I am receiving this error:  <em>Cannot match any routes. URL Segment: 'todos/add'</em></strong></p>
  
  <p><strong>How can I display in sidenav-content from AppComponent the html from the components when a link is clicked in the sidenav?</strong></p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>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]
  })
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;mat-sidenav-container&gt;
    &lt;mat-sidenav opened="true" mode="side" fixedInViewport="true"&gt;
      &lt;p&gt;I am the sidenav&lt;/p&gt;
      &lt;mat-nav-list&gt;
        &lt;mat-list-item&gt;
          &lt;a matLine routerLink="/todos"&gt;List Todos&lt;/a&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
          &lt;a matLine routerLink="/todos/add"&gt;Add Todo&lt;/a&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
          &lt;a matLine routerLink="/todos/delete"&gt;Delete Todo&lt;/a&gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;p&gt;Main Content&lt;/p&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>What I want to achieve:
  <a href="https://i.stack.imgur.com/QgvSd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QgvSd.jpg" alt="enter image description here"></a></p>