Angular2 multiple router-outlet in the same template

Question

Is it possible to have multiple router-outlet in the same template?

If yes then how to configure the routes?

I am using angular2 beta.

Answer 1

yes you can, but you need to use aux routing. you will need to give a name to your router-outlet:

<router-outlet name="auxPathName"></router-outlet> 

and setup your route config:

@RouteConfig([   {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true},   {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent} ]) 

Check out this example, and also this video.

---

Update for RC.5 Aux routes has changed a bit: in your router outlet use a name:

<router-outlet name="aux"> 

In your router config:

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'} 

Answer 2

You can have multiple router-outlet in same template by configuring your router and providing name to your router-outlet, you can achieve this as follows.

Advantage of below approach is thats you can avoid dirty looking URL with it. eg: /home(aux:login) etc.

Assuming on load you are bootstraping appComponent.

app.component.html

<div class="layout">     <div class="page-header">         //first outlet to load required component         <router-outlet name='child1'></router-outlet>     </div>     <div class="content">         //second outlet to load required component         <router-outlet name='child2'></router-outlet>     </div> </div> 

Add following to your router.

{     path: 'home',  // you can keep it empty if you do not want /home     component: 'appComponent',     children: [         {             path: '',             component: childOneComponent,             outlet: 'child1'         },         {             path: '',             component: childTwoComponent,             outlet: 'child2'         }     ] } 

Now when /home is loaded appComponent will get load with allocated template, then angular router will check the route and load the children component in specified router outlet on the basis of name.

Like above you can configure your router to have multiple router-outlet in same route.