Yes! We can use multiple router-outlets in same template by configuring our routers and simply add the router-outlet name. You can see in the example.
Syntax-
<div class="row"> <div class="user"> <router-outlet name="userList"></router-outlet> </div> <div class="userInfo"> <router-outlet name="userInfo"></router-outlet> </div> </div>
And setup your route config:
const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'user', component: userComponent, children: [ { path: 'userList', component: userListComponent, outlet: 'userList' }, { path: ':id', component: userInfoComponent, outlet: 'userInfo' }] }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [] }) export class RoutingModule { }
Angular2 - Routing Concepts
| What is Routing in Angular 2? | What is Routes? |
| What is Router Imports? | What is RouterOutlet? |
| Is it possible to have a multiple router-outlet in the same template? | What is RouterLink? |
|
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..
|