title: Can you display your child routes in the parent router-outlet?
body: <p>Main question: is there a way to display a child route to the parent router-outlet? </p>
  
  <p>Consider this example in <a href="https://angular.io/guide/router" rel="noreferrer">Angular.io</a> guide for router.</p>
  
  <p><strong>Main Route Snippet:</strong></p>
  
  <pre><code>  const appRoutes: Routes = [
        ...
        {
          path: 'admin',
          loadChildren: 'app/admin/admin.module#AdminModule',
          canLoad: [AuthGuard]
        },
        {
          path: 'crisis-center',
          loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
          data: { preload: true }
        },
        ....
      ];
  </code></pre>
  
  <p><strong>Main Component Snippet:</strong></p>
  
  <pre><code>@Component({
    selector: 'app-root',
    template: `
      &lt;h1 class="title"&gt;Angular Router&lt;/h1&gt;
      &lt;nav&gt;
        &lt;a routerLink="/crisis-center" routerLinkActive="active"&gt;Crisis Center&lt;/a&gt;
        &lt;a routerLink="/superheroes" routerLinkActive="active"&gt;Heroes&lt;/a&gt;
        &lt;a routerLink="/admin" routerLinkActive="active"&gt;Admin&lt;/a&gt;
        ...
      &lt;/nav&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  </code></pre>
  
  <p><strong>CrisisCenter Route Snippet:</strong></p>
  
  <pre><code>const crisisCenterRoutes: Routes = [
    {
      path: '',
      component: CrisisCenterComponent,
      children: [
        {
          path: '',
          component: CrisisListComponent,
          children: [
            {
              path: ':id',
              component: CrisisDetailComponent,
              ...
            },
            {
              path: '',
              component: CrisisCenterHomeComponent
            }
          ]
        }
      ]
    }
  ];
  </code></pre>
  
  <p><strong>CrisesListComponent Snippet:</strong></p>
  
  <pre><code>@Component({
    template: `
      &lt;ul class="items"&gt;
        &lt;li *ngFor="let crisis of crises$ | async"
          [class.selected]="crisis.id === selectedId"&gt;
          &lt;a [routerLink]="[crisis.id]"&gt;
            &lt;span class="badge"&gt;{{ crisis.id }}&lt;/span&gt;{{ crisis.name }}
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  </code></pre>
  
  <p><strong>CrisisDetailComponent Snippet:</strong></p>
  
  <pre><code>@Component({
    template: `
    &lt;div *ngIf="crisis"&gt;
      &lt;h3&gt;"{{ editName }}"&lt;/h3&gt;
      ...
    &lt;/div&gt;
    `
  })
  </code></pre>
  
  <p>The output of this router is this:</p>
  
  <p><a href="https://i.stack.imgur.com/0L6hA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0L6hA.png" alt="enter image description here"></a></p>
  
  <p>So. What I'm trying to say is when you click on say <strong>Dragon Burning Cities</strong>, instead of displaying it under, why not just display it on the CrisesListComponent level?</p>
  
  <p>All I can think of is using <strong>*ngIf</strong> like this in <strong>CrisesListComponent</strong> :</p>
  
  <pre><code>@Component({
    template: `
      &lt;ul class="items" *ngIf="a list is selected hide this!!!"&gt;
        &lt;li *ngFor="let crisis of crises$ | async"
          [class.selected]="crisis.id === selectedId"&gt;
          &lt;a [routerLink]="[crisis.id]"&gt;
            &lt;span class="badge"&gt;{{ crisis.id }}&lt;/span&gt;{{ crisis.name }}
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  </code></pre>
  
  <p>Is there like to set the child router to this display on this parent route-outlet?</p>
  
  <p>Thanks. I hope I made my question clear.</p>