Can you display your child routes in the parent router-outlet? - angular-routing

Question

Main question: is there a way to display a child route to the parent router-outlet?
Consider this example in Angular.io guide for router.
Main Route Snippet:
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 }
},
....
];
Main Component Snippet:
#Component({
selector: 'app-root',
template: `
<h1 class="title">Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
...
</nav>
<router-outlet></router-outlet>
`
})
CrisisCenter Route Snippet:
const crisisCenterRoutes: Routes = [
{
path: '',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
...
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];
CrisesListComponent Snippet:
#Component({
template: `
<ul class="items">
<li *ngFor="let crisis of crises$ | async"
[class.selected]="crisis.id === selectedId">
<a [routerLink]="[crisis.id]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
</li>
</ul>
<router-outlet></router-outlet>
`
})
CrisisDetailComponent Snippet:
#Component({
template: `
<div *ngIf="crisis">
<h3>"{{ editName }}"</h3>
...
</div>
`
})
The output of this router is this:
So. What I'm trying to say is when you click on say Dragon Burning Cities, instead of displaying it under, why not just display it on the CrisesListComponent level?
All I can think of is using *ngIf like this in CrisesListComponent :
#Component({
template: `
<ul class="items" *ngIf="a list is selected hide this!!!">
<li *ngFor="let crisis of crises$ | async"
[class.selected]="crisis.id === selectedId">
<a [routerLink]="[crisis.id]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
</li>
</ul>
<router-outlet></router-outlet>
`
})
Is there like to set the child router to this display on this parent route-outlet?
Thanks. I hope I made my question clear.

Answer 1

I think you can, by adding name to the <router-outlet> selector and add outlet property with that name to children routes.
HTML:
<router-outlet name="test"></router-outlet>
CHILD ROUTES MODULE:
path: '',
component: CrisisCenterComponent,
outlet: "test"
Try that, you may face some issues with nested routes of this child.