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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|