Is it possible to have a multiple router-outlet in the same template?
Yes, why not! We can use multiple router-outlets in the same template by configuring our routers and simply adds the router-outlet name.
<div class="row">
<div class="user">
<router-outlet name="users"></router-outlet>
</div>
<div class="detail">
<router-outlet name="userDetail"></router-outlet>
</div>
</div>
And setups your route config and it looks like this.
//Apps roots
const appRoots = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'userDetail', component: UserDetailComponent }, //Id is a Roots parameter.
{ path: 'users', component: UserComponent, data:{ title:'User List'} },
{ path: '**', redirectTo: 'PageNotFoundComponent' } //Wild Cards, the router will instantiate the PageNotFound component.
];
And
//AppModule class with @NgModule decorator
@NgModule({
//Composability and Grouping
//imports used for composing NgModules together
imports: [
BrowserModule,
//enableTracing is used for debugging purposes only
//Enables the location strategy that uses the URL fragment instead of the history API.
RouterModule.forRoot(appRoots)
],
//bootstrapped entry component
bootstrap: [AppComponent]
})
export class AppModule { }
For
more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html