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.

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

Solution 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.

Solution 3

Aux routes syntax has changed with the new RC.3 router.

There are some known issues with aux routes but basic support is available.

You can define routes to show components in a named <router-outlet>

Route config

{path: 'chat', component: ChatCmp, outlet: 'aux'}

Named router outlet

<router-outlet name="aux">

Navigate aux routes

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

It seems navigating aux routes from routerLink is not yet supported

<a [routerLink]="'/team/3(aux:/chat;open=true)'">Test</a>

<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>

Not tried myself yet

See also Angular2 router in one component

RC.5 routerLink DSL (same as createUrlTree parameter) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

Solution 4

<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>

<div id="list">
    <router-outlet name="list"></router-outlet>
</div>
<div id="details">
    <router-outlet name="details"></router-outlet>
</div>

`

 {
    path: 'admin',
    component: AdminLayoutComponent,
    children:[
      {
        path: '',
        component: AdminStreamsComponent, 
        outlet:'list'
      },
      {
        path: 'stream/:id',
        component: AdminStreamComponent,
        outlet:'details'
      }
    ]
  }

Solution 5

Yes you can as said by @tomer above. i want to add some point to @tomer answer.

• firstly you need to provide name to the router-outlet where you want to load the second routing view in your view. (aux routing angular2.)

• In angular2 routing few important points are here.

  • path or aux (requires exactly one of these to give the path you have to show as the url).
  • component, loader, redirectTo (requires exactly one of these, which component you want to load on routing)
  • name or as (optional) (requires exactly one of these, the name which specify at the time of routerLink)
  • data (optional, whatever you want to send with the routing that you have to get using routerParams at the receiver end.)

for more info read out here and here.

import {RouteConfig, AuxRoute} from 'angular2/router';
@RouteConfig([
  new AuxRoute({path: '/home', component: HomeCmp})
])
class MyApp {}

View more solutions

Comments

[Tomer Almog]

by the way, as of January 2016, according to this resource we should not use aux just yet, since it is not ready github.com/angular/angular/issues/5027#issuecomment-16946454‌​6

[Islam Shaheen]

thanks for the reply, i am using angular2 beta. i tried to define the aux route : { aux: '/edit-entity/:id', name: 'EditEntity', component: EditEntityComponent } when i call it doesn't work: this._router.navigate(['/', ['EditEntity'], { id: id }]);

[Tomer Almog]

make sure you are including the complete route in the navigate section, not relative to your component.

[Tomer Almog]

if you want a relative route use ['./routeToYourComponent'] notice the dot before the slash

[Tomer Almog]

Update: as of May 2016, Angular2 just released their RC (release candidate) and now Aux routes are supposed to work.

[BobbyTables]

@TomerAlmog any idea as how they are supposed to work? Theres no 'aux' memeber on the configs routes (but theres an 'outlet')

[Tomer Almog]

@zedd you need to use the new router bundle, not the router-deprecated to use aux

[Kungen]

Is this supposed to work in RC5? I haven't managed to get it working. Looking at the source code for the router I cant find any "@Input() name" either.

[Günter Zöchbauer]

@Input() name is a property of the RouterOutlet class. I have to check the aux route path syntax for routerLink.

[Günter Zöchbauer]

The current syntax seems to be <a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>

[Kungen]

Please look at this question and see if you manage to help me. stackoverflow.com/questions/39142396/…

[teddy]

1 vote for update answer to RC5. Angular2 change so fast.

[Royi Namir]

@GünterZöchbauer After looking at your answer - I think i'm missing something - is it possible to remove AUX routes after visiting them via routerLink ? ( not via code ) . I've tried your answer in this simple plnkr without success. The aux route just won't reomove

[Günter Zöchbauer]

I never really tried aux routes because I always run into some bugs. I haven't tried since several months and many things were fixed since then, but I'm not familiar with aux routes and afraid I'm not able to help you. There might be other questions with answers to that problem.

[ceebreenk]

Both your links are broken.

[Filip Witkowski]

I tried your approach, but it does not work.

[webpreneur]

This does not make any sense. Please review your answer.

[Joseph Wu]

this code is actually legit, we have something similar live in our production code. however it is using one router-outlet, not multiple