Angular2 multiple router-outlet in the same template

Islam Shaheen picture Islam Shaheen · Jan 6, 2016 · Viewed 113.3k times · Source

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

Tomer Almog picture Tomer Almog · Jan 6, 2016

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: http://plnkr.co/edit/JsZbuR?p=preview Also this video: https://www.youtube.com/watch?v=z1NB-HG0ZH4&feature=youtu.be


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'}